Giter Site home page Giter Site logo

Android animation issues about animate.css HOT 15 CLOSED

daneden avatar daneden commented on May 19, 2024
Android animation issues

from animate.css.

Comments (15)

Domw avatar Domw commented on May 19, 2024

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.

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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?

from animate.css.

daneden avatar daneden commented on May 19, 2024

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.

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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.

from animate.css.

daneden avatar daneden commented on May 19, 2024

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)

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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

from animate.css.

daneden avatar daneden commented on May 19, 2024

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

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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.

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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.)

from animate.css.

wldcordeiro avatar wldcordeiro commented on May 19, 2024

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

from animate.css.

clawfire avatar clawfire commented on May 19, 2024

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

from animate.css.

daneden avatar daneden commented on May 19, 2024

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

from animate.css.

clawfire avatar clawfire commented on May 19, 2024

X.X yuk

from animate.css.

daneden avatar daneden commented on May 19, 2024

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

from animate.css.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.