Safari에서 CSS 위치 지정이 작동하지 않습니다.

Question

THIS LIVE DEMO에서 볼 수 있듯이 최신 Safari 버전에서 열면 .contentPanel은로드시 애니메이션이 적용되지 않고 올바른 위치 지정 규칙을 사용하지 않습니다.

이 애니메이션은, 초기 위치로부터 단지 .addClass의 jQuery 방법 위치를됩니다하지 올바르게 : 정상 위치로

.contentPanel,.headerLogo,.subheader{ 
-webkit-transform:translateX(100vw); 
     transform:translateX(100vw);} 

는 :

.expanded{ 
-webkit-transform:translate(0%); 
     transform:translate(0%);} 

그것은 적용되지하지도 상단하지 않습니다 포지셔닝 ... 나는 또한 긍정적 인 결과없이 백분율에 vw 단위를 바꾸는 것을 시도했다.

Chrome/Opera/FF/IE11을 열면 제대로 작동합니다.

Answer 1

적어도 Safari for Win은 구식이며 몇 년 전부터 새 버전을 출시하지 않는 것이 문제였습니다. 마지막으로 CSS calc()에 대한 지원이 없었으며 문제가되는 -webkit-calc()도 지원되지 않았습니다.