html – CSS animation appears to be like laggy/incorrect on iOS units?

I’m utilizing a flip animation for a ‘sale’ badge, and the animation runs tremendous on desktop and within the cell preview, however on my iPhone it really works in some locations, however in others it breaks. I’ve had 2 individuals who use Android telephones that they don’t see the problem either- so I imagine it’s a safari/iOS drawback?

My web site is: http://RamenGlow.com (shopify web site)

Should you scroll right down to the “High Android Instances” part of the homepage, that is the place the problem is seen. From what I can inform, the problem solely happens when 2 merchandise have the ‘sale’ badge and are subsequent to one another.

I created a gif that reveals the problem:
issue-preview-gif

The animation code is under:

animation: 5s anim-flipX ease infinite;

@keyframes anim-flipX {
  0% {
    remodel: rotateX(90deg);
  }
  50% {
    remodel: rotateX(720deg);
  }
  100% {
    remodel: rotateX(720deg);
  }
}