iOS 13 and lower CSS Animation Blink

Question

When several CSS rotation keyframe animations are layered on top of each other, some of the layers "blink" as shown in this Codepen example: https://codepen.io/JoshuaVB/full/bGevLbR.

@keyframes waves{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

This issue only seems to happen on iOS 13 and lower. It sometimes does work on iOS 13 emulators, but never works for long on iOS 12 and under. It works for all other browsers and devices.

When the layers are rendered individually, less blinking seems to occur. However, each additional layer seems to add more instability/"blinking" to the end product.

Answer 1

I found this here. I have not tested it

-webkit-backface-visibility: hidden;