lignes diagonales étranges dans Chrome/Chrome

Lorsque j'utilise des filtres CSS, des ombres, des transformations, SVG (ou similaire), mon Chrome/Chromium montre une ligne diagonale étrange (bug?):lignes diagonales étranges dans Chrome/Chrome

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

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

Dans ce stylo, ocurrs cette erreur (à la fin, lorsque l'interrupteur sur le titre): https://codepen.io/manz/pen/jyYKJo

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

Source

2017-01-30 Manz

Nous avons des actuellement le même problème et il semble disparaître lorsque certains éléments de la page qui contiennent svgs sont supprimés du DOM, mais supprimer uniquement le SVG ne fonctionne pas toujours. Parfois, une combinaison apparemment aléatoire d'éléments peut être corrigée pour résoudre le problème. C'est un gros problème pour nous affectant tous les sites construits avec notre framework, donc je serai de retour ici si je peux trouver une solution. Il a seulement commencé à se produire récemment sans aucun changement de code, c'est donc certainement une mise à jour du navigateur qui l'a causé. Actuellement sur Chrome 58.0.3029.81 – jonhobbs

Je vois encore ce petit problème sur la dernière version de Chrome (58.0.3029.110). Est-ce que cela arrive sur tout le matériel? C'est assez ennuyeux, voici un autre exemple sur auth0.com: https://i.imgur.com/lGVaNeK.png – doeke

J'ai commencé à voir ces lignes diagonales de nulle part sur des sites qui ne les avaient pas avant après la dernière mise à jour de Chrome, et cela se passe sur tous mes appareils non mobiles, chacun d'entre eux ayant un matériel très différent donc c'est définitivement un truc de Chrome. – DavidB

Il est certainement ce bug pixellisation Chrome/chrome, qui semble être spécifique à certains processeurs graphiques NVidia:

Issue 691262 Corrupted background with GPU rasterization.

Source

2017-06-14 12:55:57

le correctif indiqué dans les commentaires a fonctionné pour moi: https://bugs.chromium.org/p/chromium/issues/detail?id=691262#c32 –

J'avais le même problème dans Chrome mais j'ai finalement trouvé que le nettoyage du fichier svg a résolu le problème. J'ai utilisé SVGO https://github.com/svg/svgo.

Source

2017-05-04 14:09:42

À l'heure actuelle, j'utilise Chrome 58.0.3029.96/Windows 10. Même problème avec SVG optimisé/non optimisé. Au début, fonctionne bien, à la fin de l'animation, apparaît des lignes diagonales. – Manz

Comme indiqué ci-dessus, il est 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; 
}

Source

2017-10-14 13:35:53

lignes diagonales étranges dans Chrome/Chrome

Répondre

Questions connexes