Material-ui: [Diviseur] Hauteur incohérente sur l'écran mis à l'échelle

Créé le 10 mars 2019  ·  3Commentaires  ·  Source: mui-org/material-ui

Le comportement du diviseur dans mon bac à sable de code est étrange. Parfois, il apparaît plus épais et parfois ils n'apparaissent même pas. Cela peut être reproduit par cmd +/- sur mac pour ajuster le zoom sur votre navigateur. Veuillez consulter les captures d'écran ci-jointes pour des exemples.

Comportement attendu 🤔

Comportement actuel 😯

Étapes à suivre pour reproduire 🕹

https://codesandbox.io/s/mmnoyvq9oy

Contexte 🔦

J'essaie juste de faire fonctionner mes dialogues dans quelques contextes différents

Votre environnement 🌎

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

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

bug 🐛 Divider

Commentaire le plus utile

Essayez d'augmenter le zoom des navigateurs à 90 ou 100%. la magie

Tous les 3 commentaires

@urirahimi Vous
Vous pouvez atténuer le problème avec:

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

J'ai essayé de changer la mise en œuvre de la couleur d'arrière-plan à la bordure supérieure, cela n'aide pas.
https://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in

Essayez d'augmenter le zoom des navigateurs à 90 ou 100%. la magie

Attention: je suis toujours sur la version 3.9.2 et n'ai testé que sur Firefox et Chrome.

L'utilisation de thin comme épaisseur de bordure a résolu le problème pour moi. Il laisse le navigateur décider de l'épaisseur. Sur Chrome, thin est choisi comme étant 1px / zoom . - ce qui signifie qu'il restera toujours exactement 1 pixel réel quel que soit le niveau de zoom. Firefox fait de même lors du zoom arrière, mais rendra la bordure 2 pixels réels lorsque> = 200% de zoom, 3 pixels réels lorsque> = 300% de zoom etc. Dommage qu'ils ne se comportent pas de la même manière, mais au moins les deux se sont comportés mieux avec thin qu'avec 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,
      },
    },
  ),
});
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

mattmiddlesworth picture mattmiddlesworth  ·  3Commentaires

chris-hinds picture chris-hinds  ·  3Commentaires

FranBran picture FranBran  ·  3Commentaires

anthony-dandrea picture anthony-dandrea  ·  3Commentaires

sys13 picture sys13  ·  3Commentaires