Jump to content
Search Community

Safari bug with perspective

Phillll 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



On Safari (or iOS Safari) notice how one tile is over the top of another when it shouldn't be.


When I disable perspective, this issue does not occur.


I have tried changing the zindex at the correct place, as well as the Z 3D property. Nothing seems to work.


Is this a known issue?



Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Yes, it appears the latest version of Safari on iOS has some issues when it comes to 3D.



However, it does appear that you have perspective set on the tiles container (good). 

You may have found another bug. 


Your demo is appreciated but it would help if you could provide a simplified demo on CodePen so that we could experiment more easily with the code. 


  • Like 2
Link to comment
Share on other sites

To add to the Mighty Carl's advice..


I believe this is that Safari z-index transform bug found here: https://bugs.webkit.org/show_bug.cgi?id=61824


It looks like when an element is put on its own rendering layer, that it loses the z-index associated with it.


Different things you can try:

  • You can try removing perspective on the container (.tiles) and try and add transformPersepective on the tile element themeselves (.tile).
  • Adjust your translateZ (z) property so its at least half  the width or more of your .tile divs. So when it rotates, the tiles are above the default zero Z-axis of the tiles that have already animated.
  • Change transform-style:preserve-3d to transform-style:flat. Basically in preserve-3d mode you should use z-axis (translateZ) of the transform to set the stacking order. But in flat mode you should use z-index. Again it depends on the code used and the affect of this bug on your animation.

As Carl advised a codepen demo would be really helpful in debugging for a solution.


I hope this helps :)

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