Clipping Issue during 3d transform in Safari only

Question

I am having an interesting problem with clipping while performing a 3d rotation. I am rotating an element using :

-webkit-transform: rotate3d(0, 1, 1, 180deg);

During the animation it looks fine in Chrome, Firefox, and any other browser except for Safari.

The window is clipping through the elements behind it.This shouldn't be a z-index issue as I have assigned proper z-index to these elements.

Anyone know what could be causing this to happen just in Safari?

This is what is looks like in Safari during animation:

And properly animated in Chrome

Thanks!

Answer 1

Try setting the container of the rotated modal transform-style: flat and a new perspective. You need to change 3D rendering context.

This is related answer https://stackoverflow.com/a/18167565/1663572 -- but you probably don't want to change the position on Z axis as it changes the appearence dramatically. I couldn't use it also.