Modernizr.csstransforms false positives on Android 2.x devices #903

Closed
laurentperez opened this Issue Apr 14, 2013 · 8 comments

Projects

None yet

4 participants

@laurentperez

Hi

We discovered that Android 2.x stock browsers :

  • were unable to chain css transforms, given the following code :

    <script type="text/javascript"> var right = function(id, val, accel){ document.getElementById(id).style.webkitTransform += (accel ? "translate3d("+val+",0,0)" : "translateX(" + val + ")"); }; </script>
    box

any Android 2.x device will fail translating the box using a transition on multiple css transforms, only the first one will work. Subsequent ones will move the box back to its original position before moving it right, with no transition

  • were unable to use rotateY, they will always fallback to rotateX

I believe Modernizr.csstransforms should return false for all Android 2.x devices

Thanks

@ryanseddon
Member

Can you put a test case together to show what you're on about.

@laurentperez

I'm just concatenating translateX transforms. Here's a gist which will fail on Android 2 : https://gist.github.com/laurentperez/5389923. If you click more than once on 'go right', the box will flicker back to 0,0, then go right without the transition.

This works fine on Android 4

@stucox
Member
stucox commented Apr 16, 2013

Android 2.x doesn't support animations on multiple properties either — that's widely documented, so we added a warning note in Modernizr (which will be exposed in the docs in v3). I don't think only supporting one animation qualifies as "not supporting animations".

I wasn't aware it couldn't handle multiple transforms either, but suggest we follow the same pattern.

Or even add a new multipletransforms test? I certainly think transforms should still return true on Android 2.x.

@laurentperez

The thing is that rotateY isn't supported either, it will do a rotateX instead. Modernizr.csstransforms3d returns false, this can be the case, here rotateY is 3d. However, translate3d(10px,0,0) will work, because the X axis is a 2d pane.

Either 2d transforms fully work too, or they don't. Android 2.3 still has 40% OS share according to http://developer.android.com/about/dashboards/index.html.

@ScottSmith95

This is something I'm still struggling with because according to this Stack Overflow thread as well as my own testing, transforms don't work at all. It seems to depend on your viewport meta tag config. I think it should test false so fallbacks can be used.

@stucox
Member
stucox commented Jan 14, 2014

Ok, I’m leaning towards a UA sniff to blacklist Android 2.x – what do you think @ryanseddon?

@laurentperez & @ScottSmith95 – could you provide test cases (CodePen / JSFiddle) demonstrating these bugs?

We should also get these bugs reported on caniuse.com, which currently doesn’t flag Android 2.x as buggy at all.

@ScottSmith95

It's also notable that the Kindle Fire uses this version of Android too, but naturally reports a Mac OS X user agent. See this thread for more.
So as sucky as it sounds, I think UA sniffing is necessary here. This is actually a good sized number of users that this could affect.

@ryanseddon
Member

@stucox I think that's fair to have a UA sniff we've resorted to it before in the history test so I'm cool if we can just blacklist android 2.x.

@patrickkettner patrickkettner added a commit to patrickkettner/Modernizr that referenced this issue Jun 17, 2014
@patrickkettner patrickkettner blacklist Android 2.x on Modernizr.csstransforms
closes #903
c4c4330
@patrickkettner patrickkettner added a commit to patrickkettner/Modernizr that referenced this issue Jun 18, 2014
@patrickkettner patrickkettner blacklist Android 2.x on Modernizr.csstransforms
closes #903
f62f163
@patrickkettner patrickkettner added a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
@patrickkettner patrickkettner blacklist Android 2.x on Modernizr.csstransforms
closes #903
aa7e357
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment