Android animation issues

[daneden]

Android devices fail to display animated elements with more than one property within the animation keyframes.

As far as I can tell, the only possible solution is to warn users of this issue or to try and provide simpler fallback animations with only one property.

[Domw]

I imagine this is due to Android Browser not being up to speed with what Webkit supports, as it's not regularly updated, complex animations are probably implemented in beta form. I'm on latest Gingerbread (2.3.4) and the page doesn't even render for me.

[wldcordeiro]

So basically use Jquery as a fallback? Maybe now would be a good time to fork this and have an animate.css and mobile-animate.css?

[daneden]

I'd rather keep this thing tied up nicely - the premise of the library was to provide cross-browser, cross-platform animations. I'm working on a js/jQuery doodad to provide fallbacks but there's a problem - the JS fallback will only be active on browsers that don't support CSS animation, but Droids will show that it does support them.

[wldcordeiro]

the JS fallback will only be active on browsers that don't support CSS animation, but Droids will show that it does support them.

That's a pretty big problem right now, maybe have the JS/Jquery doodad check the browser agent for mobile and use the fallback then. I mean, it's better that it works properly than to let the browser try to render the animation and mess up.

[daneden]

That would be a good idea, except iOS has outstanding support for these animations going back 2 OS versions. It would be unfair to those users to take that away (I'm no stranger to the pains of mobile jQuery animations)

[wldcordeiro]

Oh well IIRC you can detect Android specific browser agents, and still allow iOS to use the animations.

[daneden]

Can you detect versions of android? 4.0 will (hopefully) have much better support.

[wldcordeiro]

I believe you can though I need to research some more (user-agent strings usually include some info on the OS version.)

[wldcordeiro]

Hmm looks like you can, the user-agent of my phone's default browser is
Mozilla/5.0 (Linux; U; Android 2.3.7; en-us; DROIDX Build/VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version 4.0
Mobile Safari/533.1
So I think some regex could just pull the Android ; string out and then display appropriately.

[wldcordeiro]

Alright just ran some tests.

Dolphin HD
Attention Seekers

• Flash - Working
• Bounce - Working
• Shake - Working
• Tada - Not Working
• Swing - Not Working
• Wobble - Working
• Pulse - Not Working

Fading Entrances / Exits

The default fadeIn seems to work just fine
The rest of the fades, don't seem to work properly, they're fading in but they're not displaying any of the movement animations.

I'll update with posts as I test each out (the location of the preview makes it kind of hard to test a few.)

[wldcordeiro]

Firefox for Android supports all the animations. Just tested with the current beta (I believe stable works as well.)

[clawfire]

maybe why odn't using some modernizr to test if browser can or not use css animation and fall back if not ?

[daneden]

@clawfire because Modernizr will return true for CSS animation on Android - it has support, just not very good.

[clawfire]

X.X yuk

[daneden]

Various workarounds have been discovered for this, and at the end of the day it's Google's problem. Not ours. Closing.