帶父變換的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/

編輯 嘛。這可能是這件事：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); 
}