-webkit-transformの点滅/レンダリングの問題

Question

-webkit-transformで奇妙な問題が発生しました。 perspectiveとrotateXを使用して要素を「フリップアップ」させると、要素の高さが十分であれば、一定の角度を超えてちらつくか、レンダリングされません。

問題を説明するjsFiddle demoを設定しました。マウスを左右に動かすと矩形が回転します。

• 要素は背の高い400ピクセルである場合には、すべてが正常に動作するようです。

• "4000"をクリックして、要素の高さを4000pxにします。 テキストは特定の範囲内のの更新を停止し、のレンダリングはflickeryです。

• 「40000」をクリックすると、40000pxの高さになります。それは小さい角度で細かくレンダリングしますが、は完全に約80度で消えます。

ここでは何が起こっていますか？回避策がありますか、WebKitバグを提出する必要がありますか？

（注：私は、OS X上のSafariとChromeの両方で、この動作を参照してください）

Answer 1

このコードの問題はCSS3perspective財産です。要素の高さが4000px以上になると、画面に近づくと表示されなくなります（perspectiveプロパティで定義されています）。
要素が高くなると、要素はさらに離れて表示されます。

は、私は別の視点は、要素の高さに応じて取得するには、いくつかのif文を作った：。私は間違ったフィドルを使用していない限り、

if (document.getElementById("m2").offsetHeight == 400) { 
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX/5) + "deg)"; 
} 

if (document.getElementById("m2").offsetHeight == 4000) { 
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX/5) + "deg)"; 
} 

if (document.getElementById("m2").offsetHeight == 40000) { 
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX/5) + "deg)"; 
}