web-dev-qa-db-fra.com

Étranges lignes diagonales en Chrome/Chrome (bug?)

Lorsque j'utilise des filtres CSS, des ombres, des transformations, des SVG (ou similaires), mes Chrome/Chromium présentent une diagonale étrange:

    filter:drop-shadow(0px 0px 10px #dce810);
    transform:skew(-15deg); 

Diagonal lines error Chrome/Chromium

Aucune erreur dans Firefox (Windows)/Canary Chrome 58. Erreur sur Chrome 56 et Chromium 58 (Windows).

Dans ce stylo, cette erreur se produit (à la fin, lors de l'activation du titre): https://codepen.io/manz/pen/jyYKJo }

Est-ce que quelqu'un sait s'il s'agit d'un bogue connu ou d'un problème qui est résolu en désactivant une option?

27
Manz

Il s'agit presque certainement de ce bogue de rastérisation Chrome/Chromium, qui semble être spécifique à certains GPU NVidia: 

Numéro 691262 Arrière-plan corrompu avec le rasterisation GPU .

14
B Thomas

Comme indiqué ci-dessus, il s'agit d'un problème de GPU, mais la solution de contournement temporaire fonctionne très bien pour moi:

div {
    position: relative;
    z-index: 0;
}

div:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: inherit;
}
0
Jose R. Perez