Animation-delay gets out of sync on iOS

[joeldbirch]

This project rocks!

Notice that—on iOS—scrolling the page will throw the gallery items’ timelines out of sync. I guess it’s due to the way iOS pauses timers while the page is scrolling (duh, sounds self-explanatory after typing it).

I found this similar report on an unrelated repo which seems to provide workarounds, the best one (possibly) being number 3:

3) Incorporate the delay into individual @keyframe rules for each line

[benschwarz]

Whoa. What an interesting bug report. I'd never considered that iOS scrolling would stop the animation (and mess the timers up at the same time)

This must be logged as a mobile safari / webkit issue, right? It might be worth making a test page that uses js to scroll up and down for a few seconds then see how the timers are out of sync.

Either way, I'm inclined to not change anything in gallery-css because mobile safari got it wrong. I don't feel as though it would be in the spirit of the project.

[benschwarz]

ping @paulirish: Anything to add here?

[joeldbirch]

@benschwarz I agree with your "spirit of the project" comment. I'll be trying out the workaround I mentioned anyway, because gallery-css is so close to being a real-world replacement for simple galleries.

Thought I'd just whip up a quick and nasty demo that we can load on iPod/Pad/Phones. To trigger the bug, wait until the fading animation is occurring and scroll around for a couple of seconds, which will pause the animation. Notice that the currrently animating item now fades to white for a while and the timing of the items remains out of sync with each other.

iOS Safari seems to pause almost everything during scrolling, which is why things like parallax effects don't really work in it. I think it's a conscious decision that has been made for (now I'm just guessing) battery or user interaction reasons (I know various events are disabled during scrolling, too).

[paulirish]

@benschwarz

scrolling perf trumps spec conformance for the mobile safari team ( and i think that's fair). fixed postioning used to not work and fixed backgrounds are still disabled for the same reasons. I didn't know they pause timers, but it seems like another good idea. (One I'm going to see if we do with Chrome)

[benschwarz]

@paulirish Nice. Thanks for the info.

I think pausing the animation is justified, but the timers being interrupted (or perhaps not being interrupted in the same way as the animation) is a bug that should be logged! (I haven't searched yet, but I guess I will)

Thanks for logging the issue @joeldbirch, I'm going to close it because I don't see a method of "fixing" it right now.