Addressing Issue #3691 - SplitButton: In Safari, the SplitButton has mismatched heights#4797
Conversation
|
i'd like to understand this one a bit better. it seems really odd behavior. The problem with adding zero margins is that other's might have set margins that will now see them overridden. Is this a safari bug that will be resolved later? |
|
@micahgodbolt My original intention was to follow up on a set of browser reset styles, as the Fabric website is already utilizing mwf-west-european-default.min.css due to the UHF, it would be consistent for Fabric to use this on its own - since all our live examples do. However, that seemed like it might take a while and the split button has looked broken in Safari for months now (if the app using fabric doesn't load its own browser reset), so I was submitting this PR as a quick fix for the specific error. |
|
I looked into this bug a bit more and wow, thats annoying! This happened with overflow as well (different default in IE11) and the solution was to add it to the Fabric component. My problem with this solution is that it has a chance of breaking any margins applied with a single classname, but if we add it to the button tag itself, any class won't be affected.
|
micahgodbolt
left a comment
micahgodbolt
left a comment
There was a problem hiding this comment.
move style to Fabric component to keep specificity low
|
I like it! :) |
|
well that sure cleans up the PR a bit :D |
| font-size: 14px; | ||
| font-weight: 400; | ||
| height: 100%; | ||
| margin-bottom: 0px; |
|
It doesn't look like the experiments change file is needed anymore? |
|
Currently running |
* master: (67 commits) Applying package updates. Revert ChoiceGroup change in 5.0 to minimize potential partner impact. (microsoft#4962) Applying package updates. ChoiceGroup: getStyles conversion (microsoft#4852) Export SASS variables and mixins (microsoft#4959) Variants: update algorithm (microsoft#4949) Allow for customization of keycodes that cause the focus rect to appear (microsoft#4948) Mergestyles facepile (microsoft#4950) Fixing circular dependency and non-AMD references in ContextualMenu (microsoft#4946) Clean up semantic slots (microsoft#4932) Added missing merge-styles background-size typing (microsoft#4935) Applying package updates. Split menu button styles (microsoft#4922) Experimental Chiclet Component (microsoft#4678) Remove hover and pressed background colors (microsoft#4908) Remove @cschleiden as Rating code owner (microsoft#4929) Addressing Issue microsoft#3691 - SplitButton: In Safari, the SplitButton has mismatched heights (microsoft#4797) Applying package updates. Adding option for focus on tags in disabled picker (microsoft#4833) Jest merge-styles serialization fix for animation-name (microsoft#4927) ...
3 participants
Pull request checklist
$ npm run changeDescription of changes
Added a margin: 0 reset to ms-Button root, as well as the split button. This is a fix for Safari, where the browser default seems to set the margin to
0emwhich for some reason translates to a margin left and right of 2px throwing off the button layout.I will not this bug does not show up on the live demo site (https://developer.microsoft.com/en-us/fabric#/components/button)
because the UHF applies its own custom file with resets (looks, like normalize, is part of it) with this file: mwf-west-european-default.min.css.
I will follow up on general resets for Fabric as well, but for now, this single reset will solve the problem with the button.