Why do layers of animation "blink" on iOS and Safari?

Question

safari

We have been fighting with the developers for the 2nd month on this issue. On my iphone 7, when loading our site https://sintez.io , the background layers sometimes immediately, and most often a little after loading, start to "blink". Some layers disappear, then reappear. The same problem can also apply to animated borders on buttons/interactive elements (animated gradients in fact). I'm running the same site on a mobile phone - an android, which is weaker in hardware than my iphone 7, everything works correctly and nothing "blinks".
PS I really hope for Toaster's specialists who can find the problem, if any.

Answer 1

Animation makes the browser do a lot of work.
Different browsers work differently.
If you see flickering, then the rendering of frames has exceeded the comfortable 60 fps.
Recording an animation on your site shows that style recalculation eats up the lion's share of redraw time.
Read for a start, there is a good article for understanding on Habré: "Performance of animations on sites". At least you will learn how to check what slows you down.
Pay particular attention to how the browser renders the page. Your animation drives it around in a long circle of redrawing.

Answer 2

I opened the dev-tools, looked at what you were doing there, and your sprites caught my eye - there are 11 of them and each is 2000x2000px in size. It seems to be a dope.
I don't know what exactly is your problem. But I suspect that inside mobile Safari there is a certain memory limit for 1 tab, above which the browser is told to perform aggressive optimizations even at the cost of accuracy. Not that I'm condoning it, but it looks like it.
Well, a simple question: why do you need a texture on a mobile phone as much as 2 thousand pixels? Isn't one thousand enough?