CSS + JQuery 페이지 페이드 아웃/있음 - Safari 호

사이트의 여러 페이지를 탐색 할 때 &의 멋진 페이드 아웃을 시도하고 있습니다. 거의 모든 브라우저 (FF, Chrome, IE10 & 11, Android & iOS)에서 우아하게 작동합니다. 그러나 사파리 데스크톱 (v.9.1, 10.0, & 10.1)은 페이드 아웃을하지 않으며, 더 나쁜 것은 뒤로 버튼을 누르면 반환 된 페이지가 숨겨집니다 (불투명도 0). 이상하게도 Safari iOS에는 뒤로 버튼 문제가 없습니다 (그래도 페이지를 떠날 때 페이드 아웃되지는 않습니다).CSS + JQuery 페이지 페이드 아웃/있음 - Safari 호

현재 어떻게 진행되고 있는지 알려드립니다. 더 선호되는 방법이 있습니까 (우리는 여기에 가깝습니다) ??

HTML :

<body> 
<div id="content-wrap" class="content fade-out">Page content here.</div> 
</body>

JQuery와 :

$(window).load(function() { 
    $("#content-wrap").removeClass("fade-out"); 
}); 

window.addEventListener("beforeunload", function() { 
    $("#content-wrap").addClass("fade-out"); 
});

CSS : 나는 사파리에서 일할 것을 얻을 수있었습니다

.content { 
opacity: 1; 
transition: 0.8s opacity; 
} 
.content.fade-out { 
opacity: 0; 
}

출처

2017-04-25 Kenny J

JS (based on an answer found here)이를 추가하여 :

window.addEventListener("pageshow", function() { 
$("#content-wrap").removeClass("fade-out"); 
}, false);

을이이 $(window).load(function()과 잠재적 인 충돌이 발생하면 나는 확실하지 않다, 그러나 그것은 내가 지금까지 테스트 한 모든 브라우저에서 확인을 작동하는 것 같군.

출처

2017-04-26 18:39:11

CSS + JQuery 페이지 페이드 아웃/있음 - Safari 호

답변

관련 문제