Safari bug with perspective

Phillll · February 10, 2015

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.

Carl · February 10, 2015

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.

Jonathan · February 10, 2015

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

Recommended Posts