Search code examples
cssmobilewebkitmobile-website

css transform not working on android stock browser

I'm trying to animate a sidebar and it seems to be working in all browsers except the android stock browser on my galaxy s3 (android 4.1.2).

I've looked around and it seems there's trouble with translate 3D and reading the end Animation trigger but that seems to be relevant for older versions of the browser.

To animate the sidebar I'm doing a 0 to 60% translation. Relevant css below.

transform: translate3D(0,0,0);
-moz-transform: translate3D(0,0,0);
-webkit-transform: translate3D(0,0,0);


transform: translate3D(60%,0,0); 
-moz-transform: translate3D(60%,0,0); 
-webkit-transform: translate3D(60%,0,0);
Solution

  • Never mind, it was a CSS issue. Be careful when you use the '~' CSS selector. I changed it to '+' and it worked. The actual animation is still laggy and flickers though but at least it works.