Jump to content
Search Community

GSAP setting z-index to 0 on IOS after scaling an element

maskedbacon 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

Hi guys,


I'm having some issues on iPad with GSAP setting my scaled animation elements to z-index 0. This only happens if you set the initial value of the scale. I tried with scaleX and scale. I also tried adding a delay between a TweenMax.set() and a TweenMax.to(), but the same thing happened.


Here is an example of one line that has the issue. This element is position absolute with a specified z-index of 2 to begin with.


TweenMax.fromTo($label, 0.3, {opacity:0, scaleX:0.1}, {opacity:1, scaleX:1, delay:0.4 + d, ease:Quint.easeOut});

I appreciate all you've done with GSAP, and I hope you can resolve this bug!
Link to comment
Share on other sites

Correction -- this is actually happening to any element with a preset z-index and transform matrix applied via fromTo() or set().


I know you'd ideally like a link or codepen to see what's going on, but the material I'm working on is sensitive for the time being. However, it launches today so I could provide a dev link tomorrow if needed.



Link to comment
Share on other sites

You don't need to show us the "real" content -  can you just reproduce a reduced test case in codepen or something? It's pretty tough to diagnose blind. A few questions:

  1. What version of GSAP are you using?
  2. How are you setting the z-index initially? Via CSS? Inline style? Another JS framework? I just double-checked the CSSPlugin code and it should only set zIndex to 0 if there is no value set for it already. Why? Because iOS Safari had some bugs that caused it not to repaint things properly if zIndex wasn't defined. So it was a browser bug, not GSAP. We're doing the work to shield you from that. But if you're already setting it elsewhere, I'm unsure about why CSSPlugin would miss that (hence my desire for a reduced test case)
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...