web-dev-qa-db-ja.com

webkit-transformはChrome 13のzインデックスの順序を上書きします

更新

z-indexを使用して、多くのdiv要素を互いの上に重ねているというマイナーな詳細を追加できなかったのは申し訳ありません。この問題をさらに処理した後、webkit-transformは実際にはz-indexの順序付けを乱しており、実際の問題はアニメーション自体とは関係がないようです。

更新の終了

私は現在、CSS3アニメーションに非常に重いアプリケーションを開発するプロジェクトに参加しています。 -webkit-transformと-webkit-transitionを使用して、多くのdiv要素をアニメーション化しています。

ページのアニメーション化される要素がすべて消える今日まで、すべてが順調です。 Google Chromeが12.xxから13.0.782.107mに更新されたようです。今、突然、CSS3プロパティが-webkit接頭辞が機能しなくなり、このプロパティが適用されている要素が表示されなくなりました。Chromeデバッガを介して-webkit-transformプロパティを削除すると、要素が作成されます再び見える。

他の誰かが同じ問題を経験したか、この問題を解決する方法を知っていますか？

-webkitプレフィックスだけを削除しようとした（transformだけを残す）ことで、不足している要素が表示されますが、要素としてはアニメーション化されません。 CSS3プロパティtransformはサポートされていません。

私もel.style.webkitTransformとel.style.WebkitTransformを使ってみましたが、うまくいきませんでした。

説明するいくつかのサンプルコードを渡します。これの望ましい結果は、sq1を移動してsq2を明らかにすることです。

HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">

JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";
javascriptgoogle-chromecsswebkit
31
simonauner

試行錯誤で自分で解決しました。他の誰かがこの問題に遭遇した場合、私は報告すると思います。 Chrome自身がChrome 13（13.0.782.107m））に更新される前に、この問題は発生しなかったことにも注意してください。

ここでの秘訣は、宣言時に（またはtranslate3dをアニメーション化する前に）<div>オペレーションを基になるsq2（sq1）要素に追加することです。

それ以外の場合、上にあるtranslate3d（<div>）に対するsq1操作により、レンダリングはz-indexを無視し、sq1をsq2の下に配置します。これは、DOMでsq1の前にsq2が定義されているため、sq2がその上にレンダリングされるためだと思います。

したがって、解決策はtranslate3dを<div>：sの定義に含めることです（明確にするために両方に追加します）。

HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">
45
simonauner

これは、絶対または相対として配置されている要素にのみ影響します。この問題を解決するには、このように配置され、問題を引き起こしているすべての要素に次のcssステートメントを適用できます。

-webkit-transform：translate3d（0,0,0）;

これは、実際には変換を行わずに要素に変換を適用しますが、レンダリング順序に影響を与えるため、問題の原因となっている要素の上にあります。

5
Mayank

-webkit-transformの代わりにwebkit-transformまたはwebkitTransformを使用する必要があると思います。

0
Rich Bradshaw

使用する el.style.WebkitTransform（大文字のW）。

0
duri