Jump to content
Search Community

zIndex and Safari issue

Monnone test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hey everyone! I'm having an issue and I tried to hunt down the solution here to no avail. I think I'm missing a little something and maybe you guys help me past this. Basically it seems like the z-index isn't applying to my animation in Safari correctly. It seems like the z-index doesn't actually get applied until AFTER the animation to that element has completed with GSAP. 

 

I've read several things about indexing and Safari when applying certain CSS properties, or not setting the index positions first, etc. I'm just stumped. 

 

Basically I have a non-dynamic photo-stacking-rotating-thingy going on here. Top-most photo slides up, gets sent to the back of the photo stack (z-index), then slides behind the rest of the photos, then the whole things just keeps repeating forever. You can actually see the photos start to NOT stack correctly after the first photo shuffle...you have to look at the edges...you'll see it doesn't actually move to the very back. Check out the Codepen. 

 

Anyone been down this road? Sincerely appreciate the help in advance!

 

Brian

See the Pen yMmdor by monnone (@monnone) on CodePen

Link to comment
Share on other sites

Something really bizarre is happening to me in this pen... I've forked it and tried to look in debug mode only that the images show up huuuuge in there. Scaled up to the size of my screen.

 

No idea what is going on. Must be something funky with CodePen as it looks fine inside their editor.

 

And, no, I don't think the above has anything to do with your z-index issue. Nor can I see anything in your code that looks like it's the issue. Just commenting on the weirdness.

Link to comment
Share on other sites

  • Solution

Hello Monnone

 

The reason this is happening is because you are using negative z-index. As best practice you should not use negative z-index due to this very thing your seeing in Safari. Other browsers have the same issue under different circumstances using negative z-index with transforms. Always use positive z-index values for z-index. Especially when you add transforms in the mix which will give each element a new stacking context and ignore z-index

 

See Stacking Context:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

Adding negative z-index will cause headaches due to the bugs when used cross browser. Also i would recommend to add position: relative to your #mainContainer div so this way your absolutely positioned elements are relative to the #mainContainer as reference point so the browsers know where to calculate from.

 

You also might have to add  -webkit-transform:translateZ(0px); to some of your elements to fix the stacking context on non transformed elements. But i have seen this issue your dealing with and it goes back to using negative z-index with transforms.

 

Also its best to have a default z-index for your position:absolute elements in your CSS so when the page loads the browser will know the initial z-index value to work against. Z-index can be ignored once there is a transform on the same element due to stacking context. 

 

:)

  • Like 6
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...