전환 : Safari에서 회전하지 않음

웹 사이트를로드하는 동안로드 페이지가 있습니다. Chrome에서 정상적으로 작동하지만 작동하지 않기 때문에 Safari에서 문제를 해결해야합니다. 그것이 .se-pre-con 요소에 position: fixed과 관련이 나타납니다전환 : 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>

출처

2017-10-13 eddy abikhalil

당신도 당신의 HTML을 공유시겠습니까? –

done @ BrettDeWoody –

반드시 솔루션 일 필요는 없지만 이미지 태그는 유효한 HTML이되도록 닫아야합니다. –

: 여기에 내 코드입니다. 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>

출처

2017-10-13 10:36:03

웹 사이트가로드되기 전에 흰색 배경이 필요하므로 @Brett를로드하는 동안 웹 사이트 콘텐츠를 표시합니다. DeWoody –

확인. 나는 그것을 일으킬지도 모르는 또 다른 이슈, 즉'position : fixed'을 발견했다. –

전환 : Safari에서 회전하지 않음

답변

관련 문제