Material-ui: [Divider] Inconsistent height on scaled screen

[urirahimi]

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 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.1 |
| React | 16.8.4 |
| Browser | Chrome |

[oliviertassinari]

@urirahimi You are forcing Chrome to do subpixel calculation, and this usually has strange behaviors.
You can mitigate the problem with:

const theme = createMuiTheme({
  overrides: {
    MuiDivider: {
      root: {
        marginTop: 1,
      },
    },
  ),
});

I have tried changing the implementation from background color to border top, it doesn't help.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

[DanielZara]

Try to increase browsers zoom to 90 or 100 percent. Magic

[DrPhil]

Caveat: I am still on version 3.9.2 and have only tested on Firefox and Chrome.

Using thin as the border thickness fixed the problem for me. It lets the browser decide the thickness. On Chrome thin is chosen to be 1px / zoom. - meaning it will always stay exactly 1 real pixel regardless of zoom-level. Firefox does the same when zooming out, but will make the border 2 real pixels when >=200% zoom, 3 real pixels when >=300% zoom etc.. Unfortunate that they don't behave the same, but at least both behaved better with thin than with 1px.

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,
      },
    },
  ),
});