Chrome渲染错误，位置为绝对，css3

Question

我一直在想弄清楚这么大的html是怎么回事。 它可以在最新的Firefox，Safari和chrome canary中正确显示，但是普通的chrome可以显示这些奇怪的线条，我不知道为什么。

我用代码摘录创建了一个JS小提琴，这是一个更大的项目的一部分，但是我在小提琴以及我的应用程序中都看到了渲染问题。 我已附上小提琴中所见内容的屏幕快照，以供参考。

小提琴

错误截图：

红色的中间线不应位于“ close”左侧的线处。 这只是一个示例，当我将鼠标悬停在模态上时，到处都会出现线条。

由于很难复制，因此它提出的问题不那么出色。 调整浏览器大小有助于显示错误。 我的小提琴有很多html和CSS。 我不希望有人真正梳理它并解决问题。 我只想详尽地介绍问题。

我尝试过在线查找，但据我所知，找不到任何人报告相同的问题。

如果有人对导致此问题的原因有任何想法，如何解决它或将我指向相关的链接/ SO问题，我将非常感谢。

我已经排除/调查的内容：-不是由页面上的其他内容引起的，因为我将其提取到jsfiddle中并且仍然很愉快。 我还使用应用程序中的控制台删除了正文内容，这没有什么不同。 -我不认为是由渐变或过渡引起的，因为删除它们似乎没有作用-可能/可能与绝对定位有关？ 当我删除主包装元素上的绝对位置时，我没有看到这种情况。 -我读到将z-index应用于这些元素可能会有所帮助，但对这些问题没有任何帮助。

TL，DR：为什么在使用css3渐变，阴影和过渡的情况下，谷歌浏览器而不是canary或safari会在绝对定位的元素上显示渲染错误？

Answer 1

当我删除#vfs_uploader上的'-webkit-transform：scale（0.95）'和＃vfs_uploader.visible上的'-webkit-transform：scale（1）'时，它显示得很好： http : //jsfiddle.net/cjc343 / fzqPT / 2 /

我不知道这会如何影响Safari或它是否会对Chrome产生其他影响，但是在示例中它似乎不会影响布局。