How to fix animation breaks on old webkit?

Question

JavaScript

Hello people.
https://vimeo.com/292619597 - how it should work
https://vimeo.com/292620868 - how it works in the iOS 10 simulator, well, irl itself (from 4 seconds)
https://github.com/KzmnbrS/toster - sources
Please explain why on iOS <10 (on later versions everything works as it should) there are gaps in the page switching animation and how to fix them.

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

and using translate3d instead of translateX don't help :(

Answer 1

It's hard to recommend anything that is guaranteed to work. It's not about your mistakes anymore, but about the rendering features of the browser, maybe it lacks something, for example, a memory buffer for rendering. Try changing your approach to animation.
Optimize. Here you are trying to move all the content, and you move only certain sections, the one that needs to be removed, and the one that needs to be shown, everything else does not move and is somewhere behind the screen.
Or move exclusively on js, set the position at each iteration, of course, before that, remove the translate property from the css.
Or combine both options.

Answer 2

Replace with . And change only positioning and z-index. -webkit-transform-style: preserve-3d-webkit-transform-style: flat