5

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!

striff88
  • 97
  • 2
  • 10
  • Can you replicate in a fiddle/show more code. I believe you are having the issue, but allowing others to debug in a fiddle could help weed out other issues. That being said, I've had similar issues before and I know it sounds strange, but try adding a 3dtransformation on the conflicting elements but with 0,0,0 just to force rendering and see if that helps. – Leeish Mar 12 '13 at 16:28
  • Is there any progress? Question is opened too long now. – actimel Jul 26 '16 at 21:38

3 Answers3

1

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

Andrei Dotsenko
  • 78
  • 5
Aston Haigh
  • 176
  • 1
  • 15
  • Seriously? You know of some browser which supports 3D transforms but not elementary things like z-index? It is because of 3D and intersection of things in 3D space, but I don't know why some browsers do it and some don't. It is logical thing to clip off part behind some other element, but most of the time you just don't want it. I also struggle with it right now. – actimel May 05 '16 at 20:21
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.

Haroen Viaene
  • 1,329
  • 18
  • 33
actimel
  • 442
  • 6
  • 22
1

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! :)

OhSafariNo
  • 11
  • 1