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

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

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

错误截图：

红色的中间线不应该像“close”左边的线一样在那里。这只是一个例子，当我将鼠标移到模态上时，我会看到到处都是线条

这是一个不太重要的问题，因为很难复制。调整浏览器大小有助于显示错误。我的小提琴有相当多的html和css。我不希望有人真的梳理它并解决这个问题。我只是想彻底地提出这个问题

我试着在网上查找，但据我所知，没有人报告同样的问题

如果有人对造成这种情况的原因有任何想法，如何解决它或向我指出一个相关的链接/因此，我将非常感激

我排除/调查的事情： -这不是由页面上的其他内容引起的，因为我将它提取到JSFIDLE中，它仍然存在。我还使用我的应用程序中的控制台删除了主体内容，这并没有什么不同。 -我不认为是渐变或过渡造成的，因为删除它们似乎没有效果 -可能/可能与绝对定位有关？当我删除主包装器元素上的绝对位置时，我没有看到这种情况发生。 -我读到，对这些元素应用z索引可能会有所帮助，但对这些问题没有任何帮助

---

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

当我删除vfs#u上传器上的“-webkit transform:scale（0.95）”和vfs#u上传器上的“-webkit transform:scale（1）”时，它显示良好：

---

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

当我删除vfs#u上传器上的“-webkit transform:scale（0.95）”和vfs#u上传器上的“-webkit transform:scale（1）”时，它显示良好：

---

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

您的代码对我来说很好（Chrome 21.0.1180.83 m；Win XP）FWIW它在Chrome 21中看起来很不错。这可能只是mac的问题，我现在会在PC上测试它以确定。我可以在小提琴和我的windows 7 Chrome 21应用程序中看到渲染问题。我不得不在小提琴中多次调整窗口大小，但它的显示方式与应用程序中的显示方式一样。您的代码对我来说运行良好（Chrome 21.0.1180.83 m；Win XP）FWIW它在Chrome 21中看起来不错。这可能只是mac的问题，我现在会在PC上测试它以确定。我可以在小提琴和我的windows 7 Chrome 21应用程序中看到渲染问题。我不得不在小提琴上调整了几次窗口的大小，但它显示的和应用程序中的一样。你是一个节省电梯的人。这也为我修复了它。我想，当我删除东西试图找出问题所在时，我删除了95%的比例，但没有将其恢复到100%。非常感谢！经过一些额外的调查，添加背面可见性和透视图似乎解决了这一问题。现在我可以吃我的蛋糕了。你真是个省钱的人。这也为我修复了它。我想，当我删除东西试图找出问题所在时，我删除了95%的比例，但没有将其恢复到100%。非常感谢！经过一些额外的调查，添加背面可见性和透视图似乎解决了这一问题。现在我可以吃蛋糕了。