親トランスフォームを使用したCSSトランスフォームがiOS Safariで動作しない

Question

テスト可能なバージョンを簡単に作成できなかったため、モックアップを作成しました。しかし、要点を取得する：

@keyframes mainFadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(-3rem); 
 
    } 
 

 
    100% { 
 
    opacity: 1; 
 
    transform: translateY(0); 
 
    } 
 
} 
 

 
// If I use this, without the transform, then everything works. 
 
// 
 
// @keyframes mainFadeIn { 
 
// 0% { 
 
//  opacity: 0; 
 
// } 
 
// 
 
// 100% { 
 
//  opacity: 1; 
 
// } 
 
// } 
 

 
.main { 
 
    animation-name: mainFadeIn; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
    animation-timing-function: linear; 
 
    background-color: gray; 
 
    width: 100%; 
 
    height: 16rem; 
 
    padding: 3rem; 
 
} 
 

 
.card { 
 
    transition: transform 500ms; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 50% 50%; 
 
    perspective: 200px; // Ignore 
 
    margin: auto; 
 
    width: 30rem; 
 
    height: 10rem; 
 
    background-color: lightblue; 
 
    
 
    &.flipped { 
 
    transform: rotateY(-180deg); 
 
    } 
 
} 
 

 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
} 
 

 
.back { 
 
    transform: rotateY(-180deg); 
 
}

<div class="main"> 
 
    <div class="card"> 
 
    <div class="front"></div> 
 
    <div class="back"></div> 
 
    </div> 
 
</div>

がうまくいけば、これは問題がどこにあるかを知るのに十分です。

CodePen： https://codepen.io/anon/pen/owvqQP/

EDIT まあ。おそらくこのことでしょう：css z-index lost after webkit transform translate3d

しかし、私はまだそれを動作させることはできません。唯一の解決策は、アニメーションにposition: relative;とtop: 0;とtop: -3rem;を使用することです。

Answer 1

接頭辞-webkit-のように見えます。また、ハードウェアアクセラレーションにはtranslate3dを使用することをお勧めします。この方法を試してください：

@-webkit-keyframes mainFadeIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, -3rem, 0); 
    transform: translate3d(0, -3rem, 0); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 
@keyframes mainFadeIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, -3rem, 0); 
    transform: translate3d(0, -3rem, 0); 
    } 

    100% { 
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

.main { 
    -webkit-animation-name: mainFadeIn; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-name: mainFadeIn; 
    animation-duration: 1s; 
    animation-fill-mode: both; 
    animation-timing-function: linear; 
    background-color: gray; 
    width: 100%; 
    height: 16rem; 
    padding: 3rem; 
} 

.card { 
    transition: -webkit-transform 500ms; 
    -webkit-transform-style: preserve-3d; 
    transition: transform 500ms; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; 
    -webkit-perspective: 200px; // Ignore 
    perspective: 200px; // Ignore 
    margin: auto; 
    width: 30rem; 
    height: 10rem; 
    background-color: lightblue; 

    &.flipped { 
    -webkit-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    } 
} 

.front, 
.back { 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.back { 
    -webkit-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
}