Question 11473 in Shopify Question posted in
The Shopify help center can be found here.

CSS animation looks wrong/broken in some places on iOS devices only? – Shopify

I am using a flip animation for a ‘sale’ badge, and the animation runs fine on desktop and in the mobile preview, but on my iPhone it works in some places, but in others it breaks. I have had 2 people who use Android phones that they do not see the issue either- so I believe it is a safari/iOS problem?

My website is: http://RamenGlow.com (shopify website)

If you scroll down to the "Top Android Cases" section of the homepage, this is where the issue is seen. From what I can tell, the issue only occurs when 2 products have the ‘sale’ badge and are next to each other.

I created a gif that shows the issue:
issue-preview-gif

The animation code is below:

animation: 5s anim-flipX ease infinite;

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

2

Answers


  1. Chosen as BEST ANSWER
    1

    I found the solution. Changing the position to absolute and making the z-index of the badge to a high z value fixed my issue. Not sure why, but it worked!

    position: absolute;
z-index: 20;

  2. 0

    Some CSS properties are supported with vendor-specific syntax
    so you need to use always these syntaxes to make cross-browser compatibility
    -webkit-css-property-name for apple devices
    -moz-css-property-name for some mozilla devices

    Read more about vendor prefixes (here](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)

    @keyframes anim-flipX {
  0% {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform:rotateX(90deg);
  }
  50% {
    transform: rotateX(720deg);
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform:rotateX(720deg);
  }
  100% {
    transform: rotateX(720deg);
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform:rotateX(720deg);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search