IPad Safari CSS3 animation timing bug

Question

On Ipad Safari (could be on Mac Safari, but I don't have a MAC to test)... When I first load the page, or after I hit refresh, the CSS3 animation timing will be totally wacky. It's randomly off each time, but always by a hilarious margin that makes the animation behave unexpectedly.

HERE'S THE WEIRD PART...

If I go back to the home screen and re-open safari, OR if I switch to another tab and back again. The animation timing is completely fixed. So I know it is not a problem with the code itself. I've tried waiting to begin the animation until after the page loads, and forcing the screen to redraw, but nothing changes the described behavior.

Doesn't look like this breed of question gets answered much, but I can provide a link if someone is willing to help.

Still haven't figured it out. But you can use this link to test...www.timothytown.com/tims_portoflio/examples5.php — user2782001
– user2782001, Commented Nov 22, 2014 at 15:20

user2782001 · Accepted Answer · 2014-11-22 18:14:28Z

ANSWER:

Figured it out. As of IOS 8.1 Safari there is a bug in the way CSS3 animations are initially loaded if there is a mix of positive and negative -webkit-animation-delay properties.

For example

#no-delay{ -webkit-animation:myAnim 2s infinite; } #one-second-delay{ -webkit-animation:myAnim 2s infinite; -webkit-animation-delay:-1s; } @-webkit-keyframes myAnim{ 0%{ //some property } 100%{ //some property } }

will NOT be properly timed on initial load (although leaving that web page view and returning will correct the issue-still no idea why this is the case).

The fix is to add a delay to all animations that need to be synched, and to make sure that all delays are either positive or negative. The fix for the above css would be...

#no-delay{ -webkit-animation:myAnim 2s infinite; -webkit-animation-delay:-1s;//this also needs a negative delay to synch on IOS :( } #one-second-delay{ -webkit-animation:myAnim 2s infinite; -webkit-animation-delay:-2s; } @-webkit-keyframes myAnim{ 0%{ //some property } 100%{ //some property } }

Collectives™ on Stack Overflow

IPad Safari CSS3 animation timing bug

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related