Material-ui: [Teiler] Inkonsistente Höhe auf dem skalierten Bildschirm

@urirahimi Sie zwingen Chrome zur Subpixelberechnung, und dies hat normalerweise seltsame Verhaltensweisen.
Sie können das Problem verringern mit:

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

Ich habe versucht, die Implementierung von Hintergrundfarbe zu Rand oben zu ändern, es hilft nicht.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

Versuchen Sie, den Zoom des Browsers auf 90 oder 100 Prozent zu erhöhen. Magie

Vorsichtsmaßnahme: Ich bin noch auf Version 3.9.2 und habe nur auf Firefox und Chrome getestet.

Die Verwendung von thin als Randdicke hat das Problem für mich behoben. Damit kann der Browser die Dicke bestimmen. In Chrome wird thin als 1px / zoom . - Das heißt, es bleibt immer genau 1 reales Pixel, unabhängig von der Zoomstufe. Firefox macht dasselbe beim Verkleinern, macht aber den Rand 2 echte Pixel, wenn> = 200% Zoom, 3 echte Pixel, wenn> = 300% Zoom usw. Leider ist, dass sie sich nicht gleich verhalten, aber zumindest beide besser mit thin als mit 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,
      },
    },
  ),
});