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

Posted 2023-02-22

【中文标题】Chrome/Chromium 中奇怪的对角线（错误？）

【英文标题】：Strange diagonal lines in Chrome/Chromium (bug?)

【发布时间】：2017-06-16 05:10:03

【问题描述】：

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

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

【问题讨论】：

我们目前遇到了同样的问题，当页面上包含 svgs 的某些元素从 DOM 中删除时，它似乎消失了，但仅删除 SVG 并不总是有效。有时可以修复看似随机的元素组合来解决问题。对我们来说，影响使用我们的框架构建的每个站点都是一个大问题，所以如果我能找到解决方案，我会回到这里。它最近才开始发生，没有任何代码更改，因此绝对是浏览器更新导致的。目前在 Chrome 58.0.3029.81

我仍然在最新版本的 Chrome (58.0.3029.110) 上看到此故障。这是否发生在所有硬件上？这很烦人，这是 auth0.com 上的另一个例子：i.imgur.com/lGVaNeK.png

我开始在上次更新 Chrome 后没有的网站上突然看到这些对角线，而且它发生在我所有的非移动设备上，每个设备都有不同的硬件，所以它绝对是 Chrome 的东西。

【参考方案1】：

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

Issue 691262 Corrupted background with GPU rasterization.

【讨论】：

cmets 中列出的修复对我有用：bugs.chromium.org/p/chromium/issues/detail?id=691262#c32

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

目前，我使用 Chrome 58.0.3029.96 / Windows 10。SVG 优化/未优化的问题相同。开始时效果很好，动画结束时出现对角线。