正文 

当前位置： 首页 > 源码 >

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

     2023-02-22     101

关键词：

【中文标题】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 优化/未优化的问题相同。开始时效果很好，动画结束时出现对角线。

类中奇怪的异步/等待行为

】类中奇怪的异步/等待行为【英文标题】：Strangeasync/awaitbehaviourinaclass【发布时间】：2017-09-1302:12:57【问题描述】：节点7.9.0这是场景：classTestClassconstructor()constx=awaitthis.asyncFunc()console.log(x)asyncasyncFunc()returnnewPromise((accept)=>setTim 查看详情

UIImageView 中奇怪的对齐行为

】UIImageView中奇怪的对齐行为【英文标题】：StrangealignmentbehaviourinUIImageView【发布时间】：2015-04-0404:54:25【问题描述】：我在尝试正确对齐UIImageView时遇到困难。现在，我有一个非常简单的故事板，在一个视图中只有一个UIButton和U... 查看详情

zsh 中奇怪的“工作”行为

】zsh中奇怪的“工作”行为【英文标题】：Weird"jobs"behaviorwithinzsh【发布时间】：2015-12-1309:31:53【问题描述】：我的zshshell中的jobs、fg和bg命令出现了奇怪的行为。这是一个示例（所有命令都会发生这种情况，而不仅仅是pyt... 查看详情

列表理解中奇怪的 lambda 行为

】列表理解中奇怪的lambda行为【英文标题】：Weirdlambdabehaviourinlistcomprehension[duplicate]【发布时间】：2013-03-2617:27:22【问题描述】：我在列表理解中使用lambda函数，发现了一些奇怪的行为x=[(lambdax:i)foriinrange(3)]print(x[0](0))#print2insteado... 查看详情

Oracle中奇怪的SQL执行结果[关闭]

】Oracle中奇怪的SQL执行结果[关闭]【英文标题】：StrangeSQLexecutionresultinOracle[closed]【发布时间】：2012-07-2008:13:10【问题描述】：selectuniqueownerfromall_tableswheresysdate-50<(selectlast_analyzedfromdual);我刚刚写了上面的代码，奇怪的是结果与... 查看详情

Typescript 中奇怪的类型推断行为

】Typescript中奇怪的类型推断行为【英文标题】：WeirdTypeInferenceBehaviourinTypescript【发布时间】：2020-08-1206:07:13【问题描述】：假设这段代码：//baseclass:classPin<Output,Input=Output>to<Out>(pin:Pin<Out,Output>):Pin<Out,Output>retur 查看详情

C ++中奇怪的运行时异常

】C++中奇怪的运行时异常【英文标题】：StrangeruntimeexceptioninC++【发布时间】：2014-08-2616:45:48【问题描述】：我将程序缩减为极短的形式，但仍然出现异常。怎么回事？#include<iostream>intmain()intarray[5000000];intvariable=0;//here,EXC_BAD_... 查看详情

C中奇怪的malloc行为

】C中奇怪的malloc行为【英文标题】：strangemallocbehaviorinC【发布时间】：2009-10-1212:18:58【问题描述】：我正在尝试创建一个具有动态比例的矩阵并对其进行初始化这是我用来分配内存和初始化的代码：int**matrix;//memallocationmatrix=(int... 查看详情

托管 C++ 中奇怪的 GetLastError 返回

】托管C++中奇怪的GetLastError返回【英文标题】：StrangeGetLastErrorreturninManagedC++【发布时间】：2011-10-0716:15:22【问题描述】：GetLastError和托管C++有一个非常奇怪的问题。从非托管代码转换到托管代码后，GetLastError返回一些非常奇怪... 查看详情

倒计时项目中奇怪的 setInterval 问题

】倒计时项目中奇怪的setInterval问题【英文标题】：WeirdsetIntervalissueinacountdownproject【发布时间】：2022-01-2304:16:21【问题描述】：我一边看教程一边写项目（比如，听我必须做的事情，然后自己做，看看我是否能成功）。这是代码... 查看详情

Swift 中奇怪的 UInt64 行为

】Swift中奇怪的UInt64行为【英文标题】：WeirdUInt64behaviorinSwift【发布时间】：2014-11-3018:22:36【问题描述】：所以我一直在玩BigInteger实现，我发现了一些奇怪的东西......这段代码：letlargeInt:UInt64=UInt64(pow(Double(2),Double(64)))我预计它会... 查看详情

Powershell 中奇怪的命令行行为

】Powershell中奇怪的命令行行为【英文标题】：WeirdcommandlinebehaviorinPowershell【发布时间】：2012-08-3101:32:21【问题描述】：考虑以下powershell脚本：Write-Host"Foo"if($true)Write-Host"Bar"throw("thematrixhasabug")文件保存到c:\\test.ps1这是调用，在一... 查看详情

Firefox 中奇怪的引导进度条行为

】Firefox中奇怪的引导进度条行为【英文标题】：StrangebootstrapprogressbarbehaviorinFirefox【发布时间】：2014-04-0509:10:52【问题描述】：我的应用中有一个简单的动画引导进度条，仅在Firefox中表现异常。HTML：<divid="render-progress"class="pro... 查看详情

Firefox 中奇怪的表格渲染

...上呈现出奇怪的效果。在Firefox中100%放大是可以的。IE和Chrome正确呈现文档。将html代码更改为常规table/tr/td没有帮助。这是Windows8.1上 查看详情

Chrome 中奇怪的 CSS 边框问题

】Chrome中奇怪的CSS边框问题【英文标题】：StrangeCSSBorderIssueinChrome【发布时间】：2012-01-2815:38:53【问题描述】：我编写了一个应用程序，您可以从中编写支票，并且我在其中一个页面上有以下标记，用于查看和编辑支票的某些字... 查看详情

iPad应用程序中奇怪的UINavigationController行为

】iPad应用程序中奇怪的UINavigationController行为【英文标题】：StrangeUINavigationControllerBehavioriniPadapp【发布时间】：2010-12-1621:07:22【问题描述】：我有一个以UISplitViewController作为根控制器的应用程序。在控制器的主端是标准的UINavigat... 查看详情

Chrome中奇怪的画布渲染错误

】Chrome中奇怪的画布渲染错误【英文标题】：WeirdcanvasrenderingbuginChrome【发布时间】：2016-10-0516:23:38【问题描述】：我正在使用画布渲染图像，但有时会遇到这个奇怪的图形错误，当我滚动时它会消失。这是反应组件的一部分，yo... 查看详情

iCloud 日历中奇怪的日期时间格式

】iCloud日历中奇怪的日期时间格式【英文标题】：WeirddatetimeformatiniCloudcalendar【发布时间】：2013-03-1815:34:06【问题描述】：我目前正致力于显示ical格式的日期（通过caldav从iCloud获取）。但是，日期时间格式不一致，有时我会得到... 查看详情