Visibility issues on android 2.2 #12

Activity

1. idflood commented on Feb 17, 2014

   

   idflood

   on Feb 17, 2014

   More actions

   It looks like android 2.x doesn't handle perfectly csstransition, animation or css transforms.

   I've found a quick "hack" to make the menu work by simply disabling the animation for android < 4.

   var ua = navigator.userAgent;
     var match = ua.match(/Android\s([0-9\.]*)/);
     if( ua.indexOf("Android") >= 0 )
     {
       var androidversion = parseFloat(match[1], 10);
       if (androidversion < 4)
       {
         this.supportAnimations = false;
         this.supportTransitions = false;
       }
     }
   
2. rejas commented on Feb 26, 2014

   

   rejas

   on Feb 26, 2014

   Contributor

   More actions

   Just stumbled upon this too, found this info at the modernizr site: http://modernizr.com/docs/#cssanimations

   Short: Android 2.X can only handle one property when animating.

   So as long as modernizr cannot give us correct informations, your fix seems the best solution sofar.
3. travisLilleberg commented on Sep 17, 2014

   

   travisLilleberg

   on Sep 17, 2014

   More actions

   Thanks for the patch, and the explanation.

   I was still having issues with second-level menus on Android v4.4. Also, I noticed that ua.indexOf("Android") catches the Chrome and Firefox browsers as well (if they're on android, of course).

   I altered the code to ignore Android Chrome/FF and ignore the version.

   var ua = navigator.userAgent;
   if( ua.indexOf("Android") > -1 && ua.indexOf("Chrome") === -1 && ua.indexOf("Firefox") === -1)  {
       this.supportAnimations = false;
       this.supportTransitions = false;
   }
   

   I put this in the DLMenu.prototype._init function, just below where this.supportTransitions is normally set.
4. rejas

   added a commit that references this issue on May 21, 2015

   fix issue codrops#12, don't animate on android < 4 (if not using chro…

   ...

   c21b267