Material-ui: [Divider] Altura incoherente en la pantalla escalada

Creado en 10 mar. 2019  ·  3Comentarios  ·  Fuente: mui-org/material-ui

El comportamiento del divisor en mi entorno de pruebas de código es extraño. A veces se muestra más grueso y, a veces, ni siquiera aparecen. Esto se puede reproducir mediante cmd +/- en mac para ajustar el zoom en su navegador. Consulte las capturas de pantalla adjuntas para ver ejemplos.

Comportamiento esperado 🤔

Comportamiento actual 😯

Pasos para reproducir 🕹

https://codesandbox.io/s/mmnoyvq9oy

Contexto 🔦

Solo intento que mis diálogos funcionen en algunos contextos diferentes

Tu entorno 🌎

| Tech | Versión |
| -------------- | --------- |
| Material-UI | v3.9.1 |
| Reaccionar | 16.8.4 |
| Navegador | Chrome |

Screen Shot 2019-03-09 at 7 17 40 PM
Screen Shot 2019-03-09 at 7 17 49 PM

bug 🐛 Divider

Comentario más útil

Intente aumentar el zoom de los navegadores al 90 o al 100 por ciento. magia

Todos 3 comentarios

@urirahimi Estás obligando a Chrome a realizar un cálculo de subpíxeles, y esto suele tener comportamientos extraños.
Puede mitigar el problema con:

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

He intentado cambiar la implementación del color de fondo al borde superior, no ayuda.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

Intente aumentar el zoom de los navegadores al 90 o al 100 por ciento. magia

Advertencia: todavía estoy en la versión 3.9.2 y solo he probado en Firefox y Chrome.

Usar thin como grosor del borde me solucionó el problema. Permite que el navegador decida el grosor. En Chrome, thin se elige como 1px / zoom . - lo que significa que siempre permanecerá exactamente 1 píxel real independientemente del nivel de zoom. Firefox hace lo mismo cuando se aleja, pero hará que el borde sea de 2 píxeles reales cuando> = 200% de zoom, 3 píxeles reales cuando> = 300% de zoom, etc. Desafortunadamente, no se comportan igual, pero al menos ambos se comportaron mejor con thin que con 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,
      },
    },
  ),
});
¿Fue útil esta página
0 / 5 - 0 calificaciones