Chrome/Chromium 中的奇怪对角线（错误？）

Question

当我使用 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

有谁知道这是已知错误还是通过禁用任何选项解决的问题？

Answer 1

我在 Chrome 中遇到了同样的问题，但我最终发现清理 svg 文件解决了这个问题。我使用了 SVGO https://github.com/svg/svgo。

Answer 2

几乎可以肯定是这个 Chrome/Chromium 光栅化错误，它似乎特定于某些 NVidia GPU：

Issue 691262 Corrupted background with GPU rasterization.

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

Chrome/Chromium 中的奇怪对角线（错误？）

Strange diagonal lines in Chrome/Chromium (bug?)

webkit

google-chrome

blink

chromium