search

jlong / css-spinners

Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
http://www.css-spinners.com
MIT License
924 stars 157 forks source link

ball doesnt work in iOS 8 #10

Closed lukekarrys closed 8 years ago

lukekarrys commented 9 years ago

First off, thanks for these great CSS spinner animations! I'm using .ball on a site and I noticed it doesn't work in iOS 8.2 (not sure about other versions). I tried quite a bit of editing the resulting CSS to see if I could narrow down what the issue is, but I couldn't get it to work.

Here are some screenshots of what it looks like. Most of the time nothing is visible, but at the top of the ball-highlight animation, that part is visible for part of its path.

img_0066

img_0067

All the other animations worked in iOS, so at this point I'm really just curious as to why this one doesn't work? Can anyone educate me as to what this animation is doing differently than the others?

lukekarrys commented 9 years ago

On accident I found that adding transform: translate3d(0, 0, 0); to the parent containing the .ball spinner will make the animation work on iOS 8.

Here's the code I tested that made it work on iOS 8:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css/spinners.css">
  </head>
  <body>
    <style>
      .ball-container {-webkit-transform: translate3d(0, 0, 0);}
    </style>
    <div class="ball-container"><div class="ball"></div></div>
  </body>
</html>

Maybe there could be a note added to the ball example page about this?

tomhazledine commented 8 years ago

The reason this fix works could be because 3D CSS transforms use hardware acceleration, whereas 2D ones don't. This could be triggered by transform: translateZ(0); as well as the translate3d(0, 0, 0); you used.

Not sure why iOS 8 doesn't render the non-3D version in the first place, but this feels like the only explanation for the difference that I can think of.