Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Phillll

Safari bug with perspective

Recommended Posts

https://dl.dropboxusercontent.com/u/34687130/work/kynan/tiles/index.html

 

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?

 

Thanks.

Link to post
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.

http://greensock.com/forums/topic/11183-3d-transform-not-working-in-ios-safari/?hl=8.1.3#entry45521

 

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. 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

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

×