webkit変換translate3dの後にcss z-indexが失われる

98

2つの絶対位置に配置されたdiv要素が重複しています。どちらもcssを介してz-index値を設定しています。私はtranslate3dwebkit変換を使用して、これらの要素を画面からアニメーション化し、画面に戻します。変換後、要素は設定z-index値を尊重しなくなります。

誰かがdiv要素のz-index / stack-orderにWebkit変換を実行するとどうなるかを説明できますか？そして、div要素のスタック順を維持するために何ができるかを説明しますか？

ここでは、私がどのように変換を行っているかについてのいくつかの詳細情報を示します。

変換前に、各要素はcssを介して設定されたこれらの2つのWebkitトランジション値を取得します（私は.css()関数呼び出しにjQueryを使用しています：

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

次に、要素はtranslate3d -webkit-transformを使用してアニメーション化されます。

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

ところで、3番目のパラメーターtranslate3dをいくつかの異なる値に設定して、3Dスペースでスタック順序を複製しようとしましたが、うまくいきませんでした。

また、iPhone / iPadおよびAndroidブラウザーは、このコードを実行する必要があるターゲットブラウザーです。どちらもWebkitの移行をサポートしています。

css webkit transform

— レイフ
ソース

例を表示するリンクを投稿できますか？

— Littlemad

1

同じ問題に遭遇しました。内部要素スタイル「-webkit-transform：translate3d（0,0,0）」を持つ<iframe>タグが1つあり、3Dアクセラレーションを強制します。高いz-indexを持つ外側のフレームは、常に内側のiframe要素によって隠されていることがわかります。視覚的に隠されているだけで、非表示の外部要素を「クリック」できます。これはMobile Safariでのみ発生します。

— Morgan Cheng

私は10時間かけてコードが機能しない原因を突き止めました。Ugh

— Dikeneko

52

これは以下に関連している可能性があります：https : //bugs.webkit.org/show_bug.cgi?id=61824

基本的に、z軸に3D変換を適用すると、z-indexを考慮することができなくなります（3次元レンダリングプレーンになり、異なるz値を使用します）。子要素を2Dレンダリングに戻すには、を使用しますtransform-style: flat;。

— サミーデラックス
ソース

13

基本的に、z軸に3D変換を適用すると、z-indexを考慮することができなくなります（3次元レンダリングプレーンになり、異なるz値を使用します）。子要素を2Dレンダリングに戻すには、を使用しますtransform-style: flat;。

— samy-delux 2013年

2

したがって、「保存3D」モードでは、変換のZ軸を使用して順序を設定する必要があり、フラットモードでは、Zインデックスを使用する必要があります。バグは、サファリのz-indexがHWアクセラレートされた変換と組み合わせて壊れていることです。

— Steven Lu

1

動作しません。クラスごとにアニメーションスタイルを削除した場合にのみ機能します。

— fdrv 2016年

44

これは、間違いなくsamy-deluxによって指摘されたバグに関連しています。これは、絶対または相対として配置されている要素にのみ影響します。この問題を解決するには、このように配置され、問題を引き起こしているすべての要素に次のcssステートメントを適用できます。

-webkit-transform: translate3d(0,0,0);

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

— divThis
ソース

Chrome（35.0.1916.114 m）を使用して、このルールがない場合、要素が反転された後[transform：rotateY（180deg）]、jQueryクリックハンドラーがその要素に対して機能しなくなることがわかりました。また、反転後、画面にアーティファクトが残るという問題があり、特にtranslate3dが存在しない限り、それらの不透明度が変更されている場合に問題があります。この記事は、sitepoint.com / fix

— Philip Murphy

2

これにより、2つの固定要素（1つは3D変換要素を含む）に関する非常に厄介な問題が解決しました。3D変換された要素は基本的にオーバーフローし、上記の修正が適用されるまで他の要素の上に置かれます。

— Collin James

1

動作しません。クラスごとにアニメーションスタイルを削除した場合にのみ機能します。

— fdrv 2016年

12

これには少し遅れますが、Zインデックスを失った要素を次のように配置してみてください。最近、視差に関することを行うときに問題が発生し、これが大いに役立ちました。

transform-style: preserve-3d;

これは置くことを救います

transform: translate3d(0,0,0);

GPUにより多くの負担をかける他の要素について

— ラスティコリンズ
ソース

1

要素が3Dの場合、変換がGPUに余分な負担をかけることはないと思います。とにかく計算する必要があります。これは何に基づいていますか？

— Micros

7

例を見るために待っています

変換スケール（1）を実行しようとしましたか？同様の問題があったことを覚えており、要素のhtml順序を再配置し、変換の使用のz-indexが変更されただけで不要な変換を利用する必要がありました。

エラーがなければ、変換を使用するたびに、変換が使用可能な最高のZ-indexになり、htmlの最も近い要素がタグの先頭になるように順序付けされます。下から上までです。

これが役に立てば幸い

— リトルマッド
ソース

6

z-index スタッカブル要素を次のようにスタイルすると、3D変換されたdivに対して機能します -webkit-transform: translateZ(0px);

コードペンのスニペット-> http://codepen.io/mrmoje/pen/yLIul

この例では、ボタンstack upとstack down、回転された要素（この場合はimg）に対してフッターのZインデックス（+/- 1）を上下させます。

— mrmoje
ソース

スタックアップを再度クリックすることはできません

— clevertension

@Mojeさん、こんにちは。この問題についても考えています。スタックアップは、まだ再度クリックすることはできません。

— alchuang 2014

翻訳された要素に負のZインデックスを追加しないと思ったのはなぜですか？ありがとう

— 2014年

3

ここで説明した問題を再現できませんでした。私が何をするかに関係なく、z-index値はすべての変換を通じて保持されます。Chromium（Google Chrome）を使用してテストしています。

translate3d関数の3番目の引数は、要素のz軸を操作します。概念はz-indexに似ていますが、厳密には同じではありません... z軸が低い要素は、値が高い要素の下にあります。

意図したz-indexに一致するように3番目の引数の値を試してみましたが、問題は、CSS3アニメーション中にz軸が変化しないように見えることです。次の例では、ホバーされた要素が一番上にありますが、＃element_aは一番上にあります。

通常のセレクターと：hoverセレクターの両方にz-indexを追加すると、機能し、ホバーされた要素を最上位にすることができます。

それはあなたが探していたものとは正確には異なりますが、この動作は解決策を提供します。最初のレンダリングの順序を設定するには、translate3dとz-indexを使用するだけです。

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

2

これでうまくいきました。ありがとうございます。「前に」配置する要素に次を追加しました。-webkit-transform：translate3d（0、0、1px）;

— Sam Dutton、2014年

0

これを回避するもう1つの方法は、親要素を作成し、それに関連する他のすべての遷移を適用できることです。

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

JsFiddle

— さび
ソース