Transformacja CSS powoduje migotanie w Safari, ale tylko wtedy, gdy przeglądarka ma szerokość>= 2000px

Odkryłem, że zastosowanie {[0] } do elementu translującego i -webkit-transform: translate3d(0, 0, 0); do wszystkich jego dzieci, migotanie znika.

Proszę odnieść się zapobiec migotanie na WebKit-Przejście WebKit-transform.

Jeśli czcionki migoczą użyj następującego CSS:

html,body {
    -webkit-font-smoothing: antialiased;    
}

Zauważyłem, że po zastosowaniu CSS3 transformuje elementy w Chrome wygląda trochę "chrupiąco" i tekst nie jest wyrównany. Rozwiązania w Mathias answer nie mają na to wpływu. Ale tutaj jest coś dziwnego - po zastosowaniu filtrów webkit (tj. -webkit-filter: opacity(0.99999);), elementy renderowane prawidłowo i litery w tekście są wyrównane. Ale po tym elementy te wyglądają nieco rozmyte. Może to ma wpływ na twoje migotanie.

Przede wszystkim dzięki wspaniałym rozwiązaniom, które tu oferujemy. Zawsze myślałem, że w przeszłości musi być coś nie tak z moim kodem. Nie było. uzasadniłem też obramowanie 2000px dla animacji, które nie działają już płynnie. Dzięki Wam dodaję

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}  

Zrobiłem to warunkowo, ponieważ, w rzeczywistości, zdjęcia nie renderują antyaliased po dodaniu klasy. W innym miejscu zrobiłem

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}  

I dodała i usunęła dodatkową klasę poprzez JQuery. Więc przejścia są gładkie i renderowane po zakończeniu (ponowne usunięcie klasy) Trochę skomplikowane, ale działało dobrze dla mnie i w końcu sprawia, że animacje w Safari powyżej 2000px gładkie. Świetna robota!!

Proste rozwiązanie, które rozwiązało wszystkie moje problemy było takie:

.app * {
  transform-style: preserve-3d;
}