Search code examples
csssafaritransformios5perspective

mobile webkit perspective issue

A 3d rotating div cuts through another div with a higher z-index, no matter z-index Δ or perspective difference. This works fine in safari, safari mobile on iOS 4 but on iOS 5 i can see the issue

http://jsfiddle.net/voidbrain/cuHn5/7/embedded/result/

Solution

  • The "ribbon" DIV that is getting cut into is essentially at position 0 on the z-axis. In order to have it not get cut by the other DIV rotating along the y-axis, you need to push the "ribbon" DIV back on the z-axis by a distance at least half the width of the rotating DIV. For example, if the rotating DIV has a width of 100px, then apply the following CSS to the "ribbon" DIV:

    -webkit-transform: translate3d(0, 0, 50px)