我一直在破坏自己，试图弄清楚这么大的 html 发生了什么。它可以在最新的 Firefox、Safari 和 chrome canary 上正确呈现，但普通的 chrome 会呈现这些奇怪的线条，我不知道为什么。
我用我的代码摘录创建了一个 JS fiddle，它是一个更大的项目的一部分，但我在 fiddle 和我的应用程序中都看到了渲染问题。我附上了我在小提琴中看到的屏幕截图以供参考。
错误截图：
红色中间线不应该像“关闭”左侧的线一样存在。这只是一个例子，当我将鼠标悬停在模态框上时，我会看到到处都是线条。
由于难以复制，因此提出了一个不太重要的问题。调整浏览器大小有助于显示错误。我的小提琴有很多 html 和 css。我不希望任何人真正梳理它并解决问题。我只想彻底地提出问题。
我试过在网上寻找，但据我所知，我找不到任何人报告同样的问题。
如果有人对可能导致此问题的原因有任何想法，如何解决它或将我指向相关链接/SO问题，我将不胜感激。
我已经排除/调查的事情： - 不是由页面上的其他内容引起的，因为我将它提取到 jsfiddle 并且它仍然在发生。我还在我的应用程序中使用控制台删除了正文内容，但没有任何区别。- 我不认为渐变或过渡导致它，因为删除它们似乎没有效果 - 可能/可能与绝对定位有关？当我删除主包装元素上的绝对位置时，我没有看到这种情况发生。- 我读到对这些元素应用 z-index 可能会有所帮助，但它对这些问题没有任何作用。
TL，DR：为什么谷歌浏览器，但不是金丝雀或野生动物园，在自由使用css3渐变、阴影和过渡的绝对定位元素上显示渲染错误？