Jump to content


Z-Index on Safari/iOS

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



I am having an issue where the z-index that gets applied to fix some of the bugs in safari. Some of the elements on the site I am creating depend on a specific z-index set in the CSS.


It seems that the only animation that I am using which requires this z-index is a rotation, and it is used only once on my site. Once I have used this animation I have added some JavaScript to remove the z-index that is set inline after this animation is completed, which works great.


The problem is that after this animation is used, other animations that didn't need this fix before are applying the z-index now!


Does anyone know how to prevent this?



Mike Gibbons

Link to comment
Share on other sites

I read the question a few times and I'm still rather confused - can you provide a simple codepen example that demonstrates the behavior? 


And yes, I believe that Safari has bugs that show up unless you set a z-index in some situations, so GSAP does that for you (to work around the Safari bugs of course). It should honor whatever you set, or if nothing is set, it'll use zero. 

Link to comment
Share on other sites

Here's a codepen that demonstrates the issue in safari:

See the Pen DgGtz by mikes000 (@mikes000) on CodePen


First the boxes are moved and only the left style is applied. No z-index required for this animation.


Second the first box is rotated and the z-index is applied while animaiton, on complete the z-index is removed.


Third the second box is moved again using the same animation as the first, but this time a z-index is applied to the animation.



Link to comment
Share on other sites

Hello SimalamMike,


In your example.. is there any reason why your trying to change the z-index through the attr() style property..  instead of using the GSAP set() method to remove the z-index on the element?


set() method: http://api.greensock.com/js/com/greensock/TweenMax.html#set()


To remove a property from a style attribute... you would just pass an empty string for that property.



See the Pen fnaDr by jonathan (@jonathan) on CodePen

// Removing the z-index property from an element

// using GSAP set() to set an empty string
TweenMax.set($box, {"zIndex":""});

// using jQuery css() to pass a function
$box.css("zIndex", function(index) {
      return "";

// using jQuery css() to set an empty string
$box.css("zIndex", "");

Also i believe you can use the clearProps property as well.. that is part of the CSSPlugin




 clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.

// using GSAP set() and clearProps to clear z-idex
TweenMax.set($box, {clearProps:"zIndex"});

Hope that helps :)

Link to comment
Share on other sites

Thanks Jonathan,


Never thought of of just setting it to an empty string. Didn't realize that would actually just clear the item. I always thought it had to be a value.


The issue still stands that after using the rotation animation other animations that didn't require a z-index property will get a z-index. I suppose I could set a clearProps on every single animation. Would that cause any performance issues when using many animations?

Link to comment
Share on other sites

Check out this post from Jack explaining that if your using GSAP to animate or change values.. its best to have GSAP set properties so GSAP can keep track of changes.




Also you can add clearProps  to your tweens so GSAP can clear specific properties after the tween completes.. example:

TweenLite.to($box, 2,  { 
     // clear inline styles when the tween completes or just clearProps on "zIndexl"

As far as your question.. Would that cause any performance issues when using many animations? ..


I don't think it would hinder performance.. try some tests... but Jack or Carl would be the best to answer that. :)

Link to comment
Share on other sites

This sounds like it is related to the workaround I mentioned above - Safari had bugs that caused transforms not to render correctly without setting a zIndex. Again, that has nothing to do with GSAP specifically - it's a bug in Safari that we're working around so that you don't run into trouble. In your example, you alter the rotation to 360, so even though that may LOOK the same as a rotation of 0, as far as GSAP is concerned there's still a rotation applied that it must keep track of, and it is implementing that zIndex. 


I'm curious - why is the zIndex a problem for you? Are you saying that there is some negative side effect? 

  • Like 1
Link to comment
Share on other sites

In the site that I am creating there are elements that are animated that don't require to have a z-index set. They are animated along side that elements that require a z-index set to be clickable by a user.


The effect I am creating is a parallax effect where clickable items are in behind the foreground layer. I have tried to get this functionality to work with a z-index on the parallax images, and then having higher z-index on the clickable items with no luck. The only thing that seems to work is not having a z-index set on anything other than the clickable items to bring them up in front.


After using the rotation it has caused all the elements that have a standard animation to get an z-index set only in safari and the iPad. Even after the rotated element is not on the page. This has caused the items to not be clickable after the rotation.


I understand what your saying in regard to the item still being rotated at 360.


I took a quick look at the source code and it looks like once the rotation animation is called the variable "_reqSafariFix" is set and the z-index will get set on all further animations. Is there a way to reset this variable. In my particular use case the safari fix is no longer needed in because after the rotation the element is no longer on the page.

Link to comment
Share on other sites

Right, the _reqSafariFix must be persistent because that's what's necessary to work around Safari's bug (it's not only for transformed elements). Otherwise, if an element was transformed (and got a zIndex) and then another element changed position (regardless of whether or not it was a transform), that other element often wouldn't display correctly. So instead of trying to reset that variable, I'd recommend setting the z-index on your stuff. Maybe try using a global selector that sets z-index to 0. 

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.