Transition: rotation ne fonctionne pas dans Safari

Question

J'ai une page de chargement pendant le chargement du site. Cela fonctionne très bien dans Chrome, mais je dois le réparer sur Safari car cela ne fonctionne pas. Voici mon code:

.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

Il semble qu'il a à faire avec le position: fixed sur l'élément .se-pre-con. Essayez d'utiliser le positionnement absolute ou de le positionner d'une autre manière.

.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>