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?