带有框阴影的Chrome Bug显示行

Question

在开发网站时，我注意到Google Chrome中存在以下错误。由于显而易见的原因，徽标和文本已被更改。

正常显示：

显示错误后显示：（注意导航栏下方的灰线）

背景：

• 首次加载时，页面始终正常。只有当我向下滚动多次时，才会出现该错误。它并不总是相同的线，并且当我保持向上/向下滚动时保持改变位置。但总是相同大小的线条和相同的颜色。

• 当我删除导航栏的方框阴影时，这些线条不再显示。

• 该错误仅出现在Google Chrome中，而不是出现在Firefox和Edge中（无法在Safari中试用）。

• 我在Windows 10上安装了一个nvidia GPU。

• 这绝对是由于盒子阴影，因为我可以通过添加这行CSS来重现其他网站中的错误（以下SO网站中的示例）。

涉及的代码行：

box-shadow: 0 1px 0 0 rgba(0,0,0,0.1)

注意：它仍显示为1，不透明度而不是0.1。

我发现最接近的是此问题：Strange diagonal lines in Chrome/Chromium (bug?)

但我不确定它是不是一回事，因为它不是相同的外观，相同的模式，并且出于同样的原因而不会出现。

有没有人遇到同样的想法，并且可以肯定它是同一个问题/找到了此错误的修复程序，或者是否与向Chrome报告相关？

Answer 1

使用 position: relative 对我不起作用。但是，此解决方案确实适用于此错误：Strange Box-shadow bug on Chrome 51 while scrolling。

<块引用>

为阴影的模糊添加 0.1px

box-shadow: Xpx Ypx 0.1px Spx #yourcolor;

Answer 2

我在Chrome中遇到了类似的问题，其中带有：焦点状态的输入框阴影的变化会在90％的时间内显示一条线：input bug with box-shadow

为我修复的是将position:relative添加到具有box-shadow属性的元素。