Jump to content
Search Community

Safari - Half Image clips?

cjstage 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

Hello.

 

It's my first time really diving into GSAP and I've discovered an issue that only seems to effect Safari.  When transitioning two images near each other they appear to overlap.  I'm not sure how to prevent this behavior on Safari but other browsers render this the intended way.

 

See the Pen NOpGeW by cjstage (@cjstage) on CodePen

 

Ideas?

See the Pen NOpGeW by cjstage (@cjstage) on CodePen

Link to comment
Share on other sites

Hi @cjstage,

 

This is specifically due to rotating on an axis ... and I believe is an accurate representation of what is happening. Imagine you have two shapes each containing points [1, 1] and [-1,-1] (i.e. they are on the same plane). If one were to rotate on the X or Y axis,  an edge of that would come forward on the Z axis while the opposite edge would go deeper into the Z axis, appearing behind the other shape. But ... if you moved the one rotating back enough on the Z axis (or the other forward enough on the Z axis) ... it wouldn't cross in front of the other's Z position (0).

 

See the Pen XxMXzq by sgorneau (@sgorneau) on CodePen

 

  • Like 4
Link to comment
Share on other sites

56 minutes ago, cjstage said:

Ah, that totally makes sense.  It's interesting that behavior doesn't happen on other browsers.  Now that it's been explained I would almost expect that from the others.

 

Yep, Safari has always handled z-index sorting like that in a very unique way. Some would argue it's more accurate/intuitive, but frankly I think it's quite annoying especially because none of the other browsers do that. It's totally unrelated to GSAP. 

 

Happy tweening!

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