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);
}
}