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

[maskedbacon 0 Likes (Newbie)]

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!

 

Thanks,
David

[maskedbacon 0 Likes (Newbie)]

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.

 

Thanks!

[GreenSock 8,117 Likes (Superhero)]

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)