Material-ui: [Divisor] Altura inconsistente na tela dimensionada

Criado em 10 mar. 2019  ·  3Comentários  ·  Fonte: mui-org/material-ui

O comportamento do divisor em minha caixa de proteção de código é estranho. Às vezes aparece mais grosso e às vezes nem aparece. Isso pode ser reproduzido por cmd +/- no mac para ajustar o zoom no seu navegador. Por favor, veja as imagens em anexo para exemplos.

Comportamento esperado 🤔

Comportamento Atual 😯

Passos para reproduzir 🕹

https://codesandbox.io/s/mmnoyvq9oy

Contexto 🔦

Apenas tentando fazer meus diálogos funcionarem em alguns contextos diferentes

Seu ambiente 🌎

| Tech | Versão |
| -------------- | --------- |
| Material-UI | v3.9.1 |
| React | 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

Comentários muito úteis

Tente aumentar o zoom do navegador para 90 ou 100 por cento. Magia

Todos 3 comentários

@urirahimi Você está forçando o Chrome a fazer cálculos de subpixel e isso geralmente tem comportamentos estranhos.
Você pode atenuar o problema com:

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

Tentei mudar a implementação da cor de fundo para a parte superior da borda, mas não ajudou.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

Tente aumentar o zoom do navegador para 90 ou 100 por cento. Magia

Advertência: ainda estou na versão 3.9.2 e testei apenas no Firefox e Chrome.

Usar thin como espessura da borda resolveu o problema para mim. Ele permite que o navegador decida a espessura. No Chrome thin é escolhido como 1px / zoom . - o que significa que sempre permanecerá exatamente 1 pixel real, independentemente do nível de zoom. O Firefox faz o mesmo ao diminuir o zoom, mas fará com que a borda seja 2 pixels reais quando> = 200% de zoom, 3 pixels reais quando> = 300% de zoom etc. Infelizmente eles não se comportam da mesma forma, mas pelo menos ambos se comportaram melhor com thin que com 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,
      },
    },
  ),
});
Esta página foi útil?
0 / 5 - 0 avaliações