1

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

問題を説明するjsFiddleデモをセットアップしました。マウスを左右に動かして長方形を回転させます。

  • 要素の高さが 400px の場合、すべて正常に動作しているように見えます。

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

  • 「40000」をクリックして、要素の高さを 40000px にします。小さな角度ではきれいにレンダリングされますが、約 80 度で完全に消えます。

何が起きてる？回避策はありますか、それとも WebKit のバグを報告する必要がありますか?

(注: この動作は、OS X の Safari と Chrome の両方で見られます。)

4

1 に答える 1

3

このコードの問題はCSS3 perspectiveプロパティにあります。要素の高さが 4000px 以上の場合、画面に近づくと消えます。これは、500px しか離れていないためです (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)";
}
于 2012-04-18T13:00:04.177 に答える