Как устранить разрывы анимации на старых Webkit?

Question

[Борис Кузьмин]

Здравствуйте, люди.

https://vimeo.com/292619597 - как должно работать
https://vimeo.com/292620868 - как работает в симуляторе iOS 10, ну и irl собственно (с 4 секунды)
https://github.com/KzmnbrS/toster - исходники

Объясните, пожалуйста, почему на iOS <10 (на более поздних версиях все работает как надо) в анимации переключения страниц появляются разрывы и как их устранить.

-webkit-transform-style: preserve-3d
-webkit-backface-visibility: hidden	
-webkit-perspective: 1000

и использование translate3d вместо translateX не помогают:(

Comments

[profesor08]

Какие разрывы? На видео плавно все.

[Борис Кузьмин]

profesor08, поправил пост

[profesor08]

Значит ты про то, что не прорисовывается контент?

[Борис Кузьмин]

profesor08, ага

Answer 1

[profesor08]

Сложно что либо посоветовать, что гарантированно сработает. Тут дело больше не в твоих ошибках, а в особенностях рендера у браузера, возможно ему чего-то не хватает, например буфера памяти на рендер. Попробуй изменить подход к анимации.

Оптимизируй. Вот ты пытаешься двигать весь контент, а ты двигай только отдельные секции, ту что надо убрать, и ту что надо показать, все остальное не движется и находится где-то за экраном.

Или двигай исключительно на js, на каждой итерации устанавливай положение, естественно перед этим удали из css свойства translate.

Или совмести оба варианта.

Comments

[Борис Кузьмин]

Эх, очень надеялся на однострочный фронтэнд костыль, который все исправит:( Благодарю за потраченное время.

[Борис Кузьмин]

Pure JavaScript решение на animationframe везде работает восхитительно

Answer 2

[xmoonlight]

Заменить -webkit-transform-style: preserve-3d на -webkit-transform-style: flat.
А менять исключительно позиционирование и z-index.