Google chrome 铬/铬的奇怪对角线（bug？）

当我使用CSS过滤器、阴影、转换、SVG（或类似工具）时，我的Chrome/Chrome会显示一条奇怪的对角线：

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

Firefox（Windows）/Canary Chrome 58中没有错误。Chrome 56和Chrome 58（Windows）上出现错误

在此笔中，OCURR出现此错误（在结束时，打开标题时）：

---

有人知道这是一个已知的错误还是通过禁用任何选项可以解决的问题吗？

我在Chrome中也遇到了同样的问题，但我最终发现清理svg文件解决了这个问题。我用过SVGO

几乎可以肯定的是，这种铬/铬光栅化缺陷似乎是特定于某些NVidia GPU的：

---

如上所述，这是一个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;
}

---

现在，我使用的是Chrome58.0.3029.96/Windows10。SVG优化/未优化也存在同样的问题。在开始时，效果很好，在动画结束时，出现对角线。我们目前也遇到了同样的问题，当页面上包含SVG的某些元素从DOM中删除时，它似乎消失了，但仅删除SVG并不总是有效。有时，看似随机的元素组合可以解决问题。这对我们来说是一个巨大的问题，会影响到使用我们的框架构建的每个站点，所以如果我能找到解决方案，我将回到这里。它只是最近才开始发生，没有任何代码更改，所以肯定是浏览器更新导致了它。目前在Chrome 58.0.3029.81上，我仍然在最新版本的Chrome（58.0.3029.110）上看到这个问题。所有硬件上都会发生这种情况吗？这很烦人，auth0.com上的另一个例子是：在上次更新Chrome之后，我在以前没有对角线的网站上突然看到了这些对角线，这在我所有的非移动设备上都发生了，每个都有非常不同的硬件，所以它肯定是Chrome的东西。评论中列出的修复方法对我很有效：