Jump to content
GreenSock

andynormancx

zIndexBoost not working with non-absolute elements on Chrome/Safari

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

On Safari and Chrome the zIndexBoost functionality doesn't work if the element you are dragging isn't absolutely positioned.
 
If you drag one of the boxes to the right, you'll find it is underneath the boxes it is being dragged over. I can see that larger z-index values are getting applied, but they don't take effect for some reason that I don't understand.
 
It all works fine in Firefox, but not in Chrome/Safari on OSX and on mobile Safari
 
I've created a CodePen to demonstrate the issue:

 

See the Pen vEPvxb by andynormancx (@andynormancx) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello andynormancx, and Welcome to the GreenSock Forum!

 

If you set your CSS for .box elements to position:relative it will work in Chrome and Safari. Setting position relative will not effect your elements unless you also set top, left, right, or bottom properties. Which in your case you don't need to.

 

This is standard in web-kit browsers. Anytime you need to animate anything and need it to work 100% of the time cross-browser. It is recommended  to use either position: absolute or position: relative, so you make sure the elements are positioned outside the flow of the document so they can animate free flowing.

 

Working example (test in Chrome or Safari):

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

 

Happy Tweening! :)

  • Like 4
Link to comment
Share on other sites

Welcome to the forums, Andy!

Thanks for the demo. Very helpful.

 

Great work, Jonathan.

 

And just to show that this is CSS behavior (not related to Draggable) here is a super reduced demo: http://codepen.io/GreenSock/pen/xbBmyy?editors=110

 

And for the record, z-index and positioning issues can be really difficult at times. When Jonathan isn't around, I need to reference articles like this: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  • Like 4
Link to comment
Share on other sites

Thanks guys, just when you think you know something about CSS some other quirk shows up...

 

(I'm new to the the animation)

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.
×