2011-12-19 16 views
12

この特定の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更新。 Sparky672

JSFiddle link礼儀更新:

この動作はWebKit Bugzillaに報告し、バグを導入チェンジが同定されているように思われました。

+0

16.0.912.63 mにもバグがあります。 – danjah

+1

なぜjsFiddleになりませんか? – Sparky

+0

jsfiddleでは発生しませんが、基本的なWebページを作成して起動し、それを見ることができます – danjah

答えて

33

はい、バグがあります。確かに、私はChromeのバージョンでもそれを再現することができました。

修正する場合は、「WebkitのhasLayout」フィックス-webkit-transform: translateZ(0);をラッパーまたは内部要素に追加することができます。これにより、Chromeはブロックを適切にレンダリングします。 http://jsfiddle.net/kizu/bHzWN/6/show/

+3

あなたに同意し、これがここに報告する必要があるバグであることをGoogleのPaul Irishに話しかける:http://goo.gl/AnJW5 – Rob

+1

大きな修正!これはあまり変わらずにバグを回避する最も安全な方法のようです。 – Novikov

+0

私のために働いた - ありがとう、非常に。 2013年にWebKit 24.0.1312.56 mの「hasLayout」のようなバグはありますか? * sigh * – danjah

0

はい、それはバグです:

はここで固定フィドルです。それはバージョン535で起き始めたWebキットの回帰バグのようですが、Chromeの多くのバージョンでも18xまで気付くことがあります。

もう一度対処するまで、キズのハックは問題ありません。

関連する問題