web-dev-qa-db-ja.com

Safariでwebkit-transformがz-indexを壊す

問題

壁が落ちるようにレイヤーを表示して、その背後にあるレイヤーを表示しようとしています。 2つの固定div位置を設定しました。 「壁」divは9999のz-indexを持ち、「背景」divは0のz-indexを持ちます。

私がテストしたWebkitブラウザー（Safari/IOS）では、アニメーションが「壁」で開始すると、Zインデックスが失われるか無視され、「壁」レイヤーが背景のdivの背後に突然消えるように見えます。

レイヤーのz-indexを保持する方法に関するアイデアはありますか？前もって感謝します！

コード例（注：下部のjsFiddle）

HTMLコード

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

ボタンを有効にするいくつかのJavaScript

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

CSSコード（animate.cssから引用）

#wall{
    background-color: #F00;
    width: 100px;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    z-index: 9999;
}

#background{
    background-color: #00F;
    width: 100px;
    height: 100px; 
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


/*** flipDown ***/

@-webkit-keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }
}

@keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipDown {
    -webkit-animation-name: flipDown;
    animation-name: flipDown;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform-Origin: bottom;
    -ms-transform-Origin: bottom;
    transform-Origin: bottom;
}

jsFiddle

http://jsfiddle.net/3mHe2/2/

SafariとChromeの違いを確認してください。

htmlcsssafariwebkit
16
zeroSkillz

私の回転要素は背景に隣接させるのに適していませんでしたが、適用して修正しました

transform: translateZ(1000px);
transform-style: preserve-3d;

回転要素の親に。 Safariは、背景の前面が1000pxであると認識します。

23
Kit Sunde

解決策を見つけました。うまくいけば、これは将来の誰かを助けるでしょう。

WebkitのSafariバージョンには「バグ」があることがわかりました。 3D CSSアニメーションの再生中、元のZ-Indexは失われます。代わりに、アニメーションのピースは、DOMの残りのz-indexとは別の別のz-index "グループ"に入れられるようです。

解決策は、何も変更しないwebkit変換を使用してdivでラップすることにより、背景divと壁divを同じz-indexグループに結合することです。これにより、背景と壁がラッパーdivの子になり、それぞれの子のZインデックスが保持されます。

<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <div id="wall">
        This is the wall
    </div>

    <div id="background">
        This is the background
    </div>
</div>

私はそれがこれと同じまたは同様の問題であると信じています：

cskit z-indexはwebkit変換translate3dの後に失われます

13
zeroSkillz

私はこの問題に遭遇しましたが、背後にあるはずのアイテムの親コンテナーにパースペクティブを追加するまで、何も修正されませんでした。

.wrap{
    perspective: 1000px;
}
6
pizza-r0b