Странные диагональные линии в Chrome/Chromium (ошибка?)

Когда я использую фильтры CSS, тени, преобразования, SVG (или подобные), мой Chrome/Chromium показывает странные диагональные линии:

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

Ошибка в Firefox (Windows)/Canary Chrome 58. Ошибка в Chrome 56 и Chromium 58 (Windows).

В этом ручке пропущена эта ошибка (в конце, когда включен заголовок): https://codepen.io/manz/pen/jyYKJo

Кто-нибудь знает, если это известная ошибка или какая-то проблема, которая решена путем отключения любого параметра?

Ответы

Ответ 1

Это почти наверняка ошибка Chrome/Chromium Rasterization, которая, по-видимому, специфична для некоторых графических процессоров NVidia:

Выпуск 691262 Поврежденный фон с растрированием GPU.

Ответ 2

У меня была такая же проблема в Chrome, но я, наконец, обнаружил, что очистка файла svg решила проблему. Я использовал SVGO https://github.com/svg/svgo.

Ответ 3

Как указано выше, это проблема с GPU, но временное решение для меня отлично подходит:

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