microsoft
Safari adds 2px margin: Fix in Fluent UI?
Hi, so first of all I want to say that I am aware that is not necessarily a Fluent UI bug. However, I still wanted to create an issue because you can and might want to fix it.
It seems like Safari adds a 2px margin to the left and right of each button. This has some strange effects that are probably not wanted. To see the issue, use Safari and go to https://developer.microsoft.com/en-us/fluentui#/controls/web/button. The layout is slightly off and there are some probably unwanted gaps. Here is one of them:
So please feel free to turn this into a feature request or even leave it up to the Safari team. However, from a developer point of view I'd appreciate it if the framework looks the same in all browsers without additional fixes.
Environment Information
- Browser and OS versions: Safari 15
I’ve added this to our backlog for review but it’s low on our priority list as we’re likely not going to get to it immediately due to the fact we’re currently focused on larger coherence work items and enhancements to our performance.
It looks like all buttons have a 2px left/right margin in Safari by default, not just those particular buttons on the website. This would be a reasonable thing to add an override for within Fluent UI's Button root styles. cc @khmakoto for awareness for the v9 Button too.
Adding that it seems bad in split button - following screenshot is from the CodePen exported directly from Fluent UI demo page:
For some reason this is not reproduced on the main sample page now (although in a screenshot above it is), but in CodePen it is reproducing also today.
