Jump to content
Search Community

Issues with Android stock browser (4.x)

electrichead test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
Share on other sites

  • 2 weeks later...

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 comment
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.
×
×
  • Create New...