位置绝对和css3的Chrome渲染错误

Question

我一直在努力弄清楚这个重要的html是怎么回事。它在最新的Firefox，Safari和镀铬金丝雀中正确呈现，但普通的镀铬渲染了这些奇怪的线条，我不明白为什么。

我创建了一个带有我的代码摘录的JS小提琴，它是一个更大的项目的一部分，但我在小提琴和我的应用程序中看到渲染问题。我附上了我在小提琴中看到的内容的屏幕截图供参考。

Fiddle

错误截图：

红色中间线不应该与“关闭”左侧的线条一样。这只是一个例子，当我鼠标悬停在模态上时，我会看到遍布整个地方的线条。

由于难以复制，因此问题不那么明显。调整浏览器大小有助于显示错误。我的小提琴有很多html和CSS。我不希望任何人真正梳理它并解决问题。我只是想彻底解决问题。

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

如果有人对可能造成这种情况的原因有任何想法，如何解决或指向相关链接/ SO问题，我将非常感激。

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

TL，DR：为什么google chrome，但不是canary或safari，通过自由使用css3渐变，阴影和过渡来显示绝对定位元素的渲染错误？

Answer 1

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

我不知道这会如何影响Safari，或者它是否会影响Chrome，但它似乎不会影响示例中的布局。