How to bridge the gaps of animation on old Webkit?

0 like 0 dislike
7 views
Hello, people.

https://vimeo.com/292619597 - how it should work
https://vimeo.com/292620868 - how it works in the iOS simulator 10, well actually irl (4 seconds)
https://github.com/KzmnbrS/toster sources

Please explain why on iOS <10 (later versions everything works as it should) in the animation of page switching is breached and how to fix them.

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


and use translate3d instead of translateX't help:(
by | 7 views

2 Answers

0 like 0 dislike
It is difficult to recommend anything that is guaranteed to work. Then it's not your mistakes, and the peculiarities of rendering the browser, perhaps he lacks something, for example a memory buffer on the render. Try to change the approach to the animation.

Optimize your. Here you are trying to move all of the content, you move only certain sections that should be removed, and that it is necessary to show, everything else is not moving and is somewhere behind the screen.

Or move solely in js, for each iteration, establish position, course before it is remove from the css properties translate.

Or combine both options.
by
0 like 0 dislike
Replace -webkit-transform-style: preserve-3d on -webkit-transform-style: flat.
And to change only the positioning and z-index.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
5 answers
asked Mar 28, 2019 by anVlad11
0 like 0 dislike
2 answers
110,608 questions
257,186 answers
0 comments
28,659 users