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
[Divider] Inconsistent height on scaled screen #14815
Comments
@urirahimi You are forcing Chrome to do subpixel calculation, and this usually has strange behaviors. const theme = createMuiTheme({
overrides: {
MuiDivider: {
root: {
marginTop: 1,
},
},
),
}); I have tried changing the implementation from background color to border top, it doesn't help. |
Try to increase browsers zoom to 90 or 100 percent. Magic |
Caveat: I am still on version 3.9.2 and have only tested on Firefox and Chrome. Using const theme = createMuiTheme({
overrides: {
MuiDivider: {
root: {
// Dividers not consistent when zooming.
// https://github.com/mui-org/material-ui/issues/14815
borderTop: 'thin solid rgba(0, 0, 0, 0.12)', //this color should be theme.palette.divider if that is set
backgroundColor: undefined,
height: undefined,
},
},
),
}); |
The divider behavior in my code sandbox is weird. Sometimes is shows up thicker and sometimes they don't even show up. This can be reproduced by cmd+/- on mac to adjust the zoom on your browser. Please see screenshots attached for examples.
Expected Behavior 🤔
Current Behavior 😯
Steps to Reproduce 🕹
https://codesandbox.io/s/mmnoyvq9oy
Context 🔦
Just trying to make my dialogs work in a few different contexts
Your Environment 🌎
The text was updated successfully, but these errors were encountered: