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

Question

我一直在努力弄清楚这么大的 html 是怎么回事。它在最新的 Firefox、Safari 和 chrome canary 上正确呈现，但普通的 chrome 呈现这些奇怪的线条，我不知道为什么。

我用我的代码摘录创建了一个 JS fiddle，它是一个更大元素的一部分，但我在 fiddle 和我的应用程序中看到了渲染问题。我附上了我在 fiddle 中看到的屏幕截图以供引用。

Fiddle

错误截图:

中间的红色线和“close”左边的线不应该在那里。这只是一个示例，当我将鼠标悬停在模态框上时，我发现线条到处都是。

由于难以复制，因此问题不太突出。调整浏览器大小有助于显示错误。我的 fiddle 有相当多的 html 和 css。我不希望任何人真正梳理它并解决问题。我只是想彻底地提出问题。

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

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

我已经排除/调查的事情: - 不是由页面上的其他内容引起的，因为我将其提取到 jsfiddle 中并且它仍在发生。我还使用我的应用程序中的控制台删除了正文内容，但没有任何区别。 - 我不认为渐变或过渡导致它，因为删除它们似乎没有效果 - 可能/可能与绝对定位有关？当我删除主包装器元素上的绝对位置时，我没有看到这种情况发生。 - 我读到对这些元素应用 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/

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