Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix Safari button misalignment #34861

Merged

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Oct 23, 2022

Safari adds 2px of margin on the <button> by default, which leads to disturbing misalignment. It also leads to a layout shift when loading. We need to reset the margin. We might want to revamp how we handle the CssBaseline to take care of this. I shouldn't have to do this change. For example, normalize.css takes care of it: https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L157.

Before

Screenshot 2022-10-29 at 16 56 32

https://635d3bcf13f51200081b1ac9--material-ui.netlify.app/

After

Screenshot 2022-10-29 at 16 55 56

https://deploy-preview-34861--material-ui.netlify.app/


I have added the idea to #30660 for v6, so we don't have to open more PRs like this in the future.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work docs Improvements or additions to the documentation labels Oct 23, 2022
@mui-bot
Copy link

mui-bot commented Oct 23, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-34861--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 02a15e0

@oliviertassinari oliviertassinari changed the title [docs] Fix Safari misalignment [docs] Fix Safari button misalignment Oct 23, 2022
@oliviertassinari oliviertassinari added the design This is about UI or UX design, please involve a designer label Oct 23, 2022
@oliviertassinari oliviertassinari merged commit 49ef62d into mui:master Oct 29, 2022
@oliviertassinari oliviertassinari deleted the fix-safari-margin-search branch October 29, 2022 14:54
@oliviertassinari oliviertassinari added the scope: docs-infra Specific to the docs-infra product label Nov 21, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants