Hej, wykorzystuje na mojej stronie prostą animację, która powoduje dość poważny bug na safari.
DOM wygląda tak:
<body>
<header>header</header>
<div class="page-wrapper">content</div>
<footer>footer</footer>
</body>
Animacja polega na tym, że .page-wrapper domyślnie jest schowany pod ekranem poprzez właściwość transform:translateY, a po załadowaniu strony dorzucam kolejną klasę, która przemieszcza ten element.
Tak wygląda to w css:
header {position: fixed; top: 0; left: 0;}
.page-wrapper {
-webkit-transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transform: translateY(100%) rotate(0.001deg);
transform: translateY(100%) rotate(0.001deg);
opacity: 0;
overflow: hidden;
will-change: transform;
}
.is-loaded .page-wrapper {
opacity: 1;
-webkit-transform: translateY(0) rotate(0.001deg);
transform: translateY(0) rotate(0.001deg);
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
Czyli klasa .is-loaded na rodzicu powoduje przemieszczenie się page-wrapper i to działa. Na wszytskich przeglądarkach idealnie, natomiast na safari pod contentem strony pojawia się białe pole o wysokości równej całej stronie, czyli mam np 4000px content i potem 4000px białego tła. Czasem biało tło znika podczas scrolowania, czasem nie.
Jak to rozwiązać w safari?