Safari轉換rotateX動畫bug

當我在Safari上運行這個動畫時，在包裝和目標之間存在一個不需要的偏移，它應該位於包裝的中心。此代碼在其他瀏覽器（包括IE）上運行良好。Safari轉換rotateX動畫bug

奇怪的是，目標在開發人員工具中的位置是正確的，但它只是用偏移量呈現。 Here is the screenshot.

是否有任何黑客可以接管這個問題？

我的Safari瀏覽器版本：10.1.1

.wrapper{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: red; 
 
    position: absolute; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%); 
 
     -ms-transform: translate(-50%); 
 
      transform: translate(-50%); 
 
} 
 
.target{ 
 
    height: 250px; 
 
    width: 250px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    -webkit-transform: translateX(-50%); 
 
     -ms-transform: translateX(-50%); 
 
      transform: translateX(-50%); 
 
    -webkit-animation: flip 2s; 
 
      animation: flip 2s; 
 
} 
 

 
@-webkit-keyframes flip{ 
 
\t 0%{ 
 
\t \t height: 120px; 
 
\t \t width: 120px; 
 
\t \t top: 100%; 
 
\t \t -webkit-transform: translate(-50%,0) rotateX(0deg); 
 
\t \t   transform: translate(-50%,0) rotateX(0deg); 
 
\t } 
 
\t 100%{ 
 
\t \t height: 250px; 
 
\t \t width: 250px; 
 
\t \t top: 0; 
 
\t \t -webkit-transform: translate(-50%,0) rotateX(360deg); 
 
\t \t   transform: translate(-50%,0) rotateX(360deg); 
 
\t } 
 
} 
 

 
@keyframes flip{ 
 
\t 0%{ 
 
\t \t height: 120px; 
 
\t \t width: 120px; 
 
\t \t top: 100%; 
 
\t \t -webkit-transform: translate(-50%,0) rotateX(0deg); 
 
\t \t   transform: translate(-50%,0) rotateX(0deg); 
 
\t } 
 
\t 100%{ 
 
\t \t height: 250px; 
 
\t \t width: 250px; 
 
\t \t top: 0; 
 
\t \t -webkit-transform: translate(-50%,0) rotateX(360deg); 
 
\t \t   transform: translate(-50%,0) rotateX(360deg); 
 
\t } 
 
}

<div class="wrapper"> 
 
    <div class="target"></div> 
 
</div>

感謝您的幫助！

來源

2017-07-19 XXLee

.wrapper{ 
 
\t \t height: 200px; 
 
\t \t width: 200px; 
 
\t \t background-color: red; 
 
\t \t position: relative; 
 
\t \t margin: 0 auto; 
 
\t \t } 
 
\t \t .target{ 
 
\t \t height: 250px; 
 
\t \t width: 250px; 
 
\t \t background-color: blue; 
 
\t \t position: absolute; 
 
\t \t left: -30px; 
 
\t \t right: 0; 
 
\t \t -webkit-animation: flip 2s; 
 
\t \t   animation: flip 2s; 
 
\t \t } 
 

 

 

 
@keyframes flip{ 
 
\t 0%{ 
 
\t \t height: 120px; 
 
\t \t width: 120px; 
 
\t \t top: 100%; 
 
\t \t -webkit-transform: translate(60px,0) rotateX(0deg); 
 
\t \t   transform: translate(60px,0) rotateX(0deg); 
 
\t } 
 
\t 100%{ 
 
\t \t height: 250px; 
 
\t \t width: 250px; 
 
\t \t top: 0; 
 
\t \t -webkit-transform: translate(0px,0) rotateX(360deg); 
 
\t \t   transform: translate(0px,0) rotateX(360deg); 
 
\t } 
 
}

<div class="wrapper"> 
 
    <div class="target"></div> 
 
</div>

ü可以試試這個代碼..

來源

2017-07-19 10:53:51 memre

但這代碼使目標不能在包裝:(爲什麼的中心？「左：-30px;」謝謝你接聽！ – XXLee

Safari轉換rotateX動畫bug

回答

相關問題