Chrome的CSS可見性呈現中是否存在錯誤？

在使用CSS特性的這種特定組合時，Chrome 15+似乎存在奇怪的行爲，即具有可見性隱藏和固定位置的外部元素以及具有可見性覆蓋的絕對或相對定位的內部元素。Chrome的CSS可見性呈現中是否存在錯誤？

<html> 
<head> 
<title></title> 
</head> 
<body> 
<div style="position:fixed;visibility:hidden;"> 
    <div style="position:absolute;visibility:visible;"> 
     <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png" /> 
    </div> 
</div> 
<script type="text/javascript"> 
for(var i=0; i<100; i++) { 
    document.write("<br />"); 
} 
</script> 
</body> 
</html>

上面的代碼片段在滾動時產生這個圖像。 Chrome visibility issue

相對和絕對定位都重現行爲的事實可以歸結爲這樣一個事實，即對於這個特定的DOM絕對定位等同於相對定位。

如果此標記有效且確實具有定義的行爲，則指向瀏覽器/呈現引擎中的錯誤，並且看起來性能優化變差了，尤其是考慮到此行爲是由Chrome引入的15更新。

JSFiddle link禮貌Sparky672

的

更新：

此行爲已報告給WebKit Bugzilla和看來，引入的錯誤的變更已經確定。

來源

2011-12-19 Novikov

錯誤存在於16.0.912.63米 – danjah 2011-12-19 23:01:41

爲什麼沒有jsFiddle？ – Sparky 2011-12-19 23:02:16

它不會在jsfiddle中發生，但創建一個基本的網頁，啓動它，你可以看到它 – danjah 2011-12-19 23:02:46

是的，有一個錯誤，當然：我設法在我的Chrome版本中重現它。

如果你想修復它，你可以添加「webkit的hasLayout」修復，-webkit-transform: translateZ(0);包裝或內部元素，這使得Chrome正確渲染塊。

這裏有一個固定的小提琴：http://jsfiddle.net/kizu/bHzWN/6/show/

來源

2012-01-11 11:34:03 kizu

向Google同意你的保羅愛爾蘭說，這是一個需要在這裏報告的錯誤：http://goo.gl/AnJW5 – Rob 2012-01-15 19:19:54

偉大的修復！這似乎是在不改變太多的情況下避開錯誤的最安全的方式。 – Novikov 2012-01-16 02:54:54

爲我工作 - 非常非常感謝你。 2013年，WebKit 24.0.1312.56米的「hasLayout」式錯誤？ *嘆息* – danjah 2013-01-31 22:51:59

是的，這是一個錯誤。它似乎是一個Web-kit迴歸bug，開始在版本535中發生，並且在許多版本的Chrome甚至高達18.x中都引人注目。作爲一種解決方法，kizu的hack作爲一種解決方法很好，直到他們再次解決它爲止。

來源

2012-01-15 18:52:42

Chrome的CSS可見性呈現中是否存在錯誤？

回答

相關問題