CODEWITHSUNDEEP
htmlcsstransform
striff88
striff88

Reputation: 97

Clipping Issue during 3d transform in Safari only

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:

safari

And properly animated in Chrome chrome

Thanks!

Upvotes: 5

Views: 2247

Answers (3)

Aston Haigh
Aston Haigh

Reputation: 176

It could be that in the version of safari you are using, z-index is not well supported Check can I use.com

Upvotes: 1

OhSafariNo
OhSafariNo

Reputation: 11

It's been a while, but I had the same issue, and actimel linked to an elegant workaround. (Though as they stated, it'll only work the background elements aren't already transformed 3D.)

Add these two lines to the background elements (or a container with those elements inside, or a class that all of those elements are part of):

-webkit-transform: translateZ(-1000px);
-webkit-perspective-origin: 100% 100% none;

Good luck future readers! :)

Upvotes: 1

actimel
actimel

Reputation: 451

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.

Upvotes: 1

Related Questions