轉換：旋轉在Safari中不工作

Question

我有一個加載頁面，而網站正在加載。它在Chrome中工作正常，但我需要在Safari上修復它，因爲它不起作用。這裏是我的代碼：

.se-pre-con { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background-color: #fff; 
 
} 
 

 
.loading { 
 
    top: 30%; 
 
    right: 45%; 
 
    position: fixed; 
 
    -webkit-animation: spinHorizontal 4s linear infinite; 
 
    -moz-animation: spinHorizontal 4s linear infinite; 
 
    animation: spinHorizontal 4s linear infinite; 
 
} 
 

 
@keyframes spinHorizontal { 
 
    0% { 
 
    transform: rotateY(0deg); 
 
    } 
 
    100% { 
 
    transform: rotateY(360deg); 
 
    } 
 
}

<div class="se-pre-con"> 
 
    <div class="loading"> 
 

 
    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png"> 
 
    </div>

Answer 1

看來它與position: fixed的.se-pre-con元素上做。嘗試使用absolute以其他方式進行定位或定位。

.se-pre-con { 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background-color: #ffffff; 
 
} 
 

 
.loading { 
 
    width: 279px; 
 
    height: 279px; 
 
    top: 30%; 
 
    right: 45%; 
 
    position: fixed; 
 
    -webkit-backface-visibility: visible; 
 
    -webkit-animation: spinHorizontal 2s linear infinite; 
 
    -moz-animation: spinHorizontal 2s linear infinite; 
 
    animation: spinHorizontal 2s linear infinite; 
 
    background-color: transparent; 
 
} 
 

 
@keyframes spinHorizontal { 
 
    0% { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    } 
 
}

<div class="se-pre-con"> 
 
    <div class="loading"> 
 

 
    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" /> 
 
    </div> 
 
</div>