Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
electrichead

Issues with Android stock browser (4.x)

Recommended Posts

Hello,

 

I am experiencing an edge-case error in the Android stock browser:

 

I am using greensock to animate a "shopping cart" drawer from the top of the screen. The shopping cart items scroll horizontally within that drawer when it is extended. In order to move it, I am animating the CSS "top" property. i.e. css: {top:"+=255px", "z:0.01"}

 

I added the z:0.01 to make it smooth on Android Chrome and iOS, but in the stock browser, it is better without that property. Also, when the shopping cart items are wider than the screen width (there is an overflow:hidden on the cart div), the shopping cart animation to open/close doesn't work at all in the stock browser unless that " z:1" is removed.

 

Any ideas on how I can either detect the stock browser and avoid that property, or if there is a way to force it to work?

Link to post
Share on other sites

I forgot to add this link in the question: https://github.com/greensock/GreenSock-JS/blob/master/changelog.txt

 

In the entry that says 

 

2012-08-22

---------------------------------------------
    - Worked around a bug in Android 4.x default browser that causes it to ignore changes to "top" and "left" CSS properties when they are made on the same frame as any transform property (like scale, rotation, skew, etc.).
 

 

I wonder if this same issue has resurfaced?

Link to post
Share on other sites

Have you tried just setting the z once instead of tweening it during the entire course of the animation? Like:

TweenLite.set(element, {z:0.01});
TweenLite.to(element, 1, {top:"+=255px"});
Link to post
Share on other sites

Thanks for the tip, but this breaks it altogether for me in all browsers. The

-webkit-transform:translate3d(0px,0px,0.01px);

somehow stops all my event listeners for clicks on any items inside the container.

Link to post
Share on other sites

Hmmm...works great in every browser I've tested (at least on the desktop). Can you please post a simple codepen or jsfiddle that clearly demonstrates the issue? 

 

I suspect that maybe the old Android browser doesn't update the hitTest area on elements when they're transformed in 3D. If that's true, obviously you'd need to avoid 3D transforms there (if you need the element to be interactive/clickable). I don't think there's anything we could do in GSAP to fix that browser bug, but let me know if you've got ideas. 

 

Oh, last question: does it change anything if you give it a very small rotation, like:

TweenLite.set(element, {z:0.01, rotation:0.01});

?

Link to post
Share on other sites

Hi there,

 

I tried various things and in the end I did get it to work; but I forget exactly which change was responsible. I think it was that I had to provide an initial zeroed transform for the element in the CSS. The tweening worked after I did that.

-ms-transform:translate3d(0%,0px,0px);
-webkit-transform:translate3d(0%,0px,0px);
transform:translate3d(0%,0px,0px);

my tween is 

{ x:elem.width() + 'px' }

Thanks for the help!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×