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產生其他影響，但是在示例中它似乎不會影響布局。