google-chrome - mejor - google chromium

Extrañas líneas diagonales en Chrome/Chromium(bug?)

Question

Cuando uso filtros CSS, sombras, transformaciones, SVG (o similar), mi Chrome / Chromium muestra unas líneas diagonales extrañas:

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

No hay error en Firefox (Windows) / Canary Chrome 58. Error en Chrome 56 y Chromium 58 (Windows).

En esta pluma, se produce este error (al final, cuando se enciende el título): https://codepen.io/manz/pen/jyYKJo

¿Alguien sabe si es un error conocido o algún problema que se resuelve al desactivar alguna opción?

Answer 1

Como se indicó anteriormente, es un problema de GPU, pero la solución temporal funciona muy bien para mí:

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;
}

Answer 2

Es casi seguro que este error de rasterización de Chrome / Chromium, que parece ser específico para ciertas GPU NVidia:

Problema 691262 Fondo dañado con rasterización de GPU .

Answer 3

Estaba teniendo el mismo problema en Chrome pero finalmente encontré que al limpiar el archivo svg se resolvió el problema. Utilicé SVGO https://github.com/svg/svgo .