3

I am playing around with CSS transition and rotate effects for displaying a business card. I got everything to function properly in Chrome and FF but in Safari it distorts the div.

I tried applying the following properties to no avail:

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

See Codepen for code and pics below:

Safari: Safari

Chrome: Chrome

alchuang
  • 3,487
  • 3
  • 34
  • 48
  • I got the same problem with Safari. It's perfectly working in Chrome, FF, ... I know it has been a couple years - any solution? – nulldevops Jan 10 '21 at 17:22

2 Answers2

7

I believe this is an issue with stacking references and CSS transforms clashing.

Try adding: 

-webkit-transform: translate3d(0,0,0);

to the parent element of your card. That should form the transformed children to obey the z-index stacking.

If anyone else has some input on this that would be great.

Ricardo Martinez
  • 73
  • 1
  • 5
0

try

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.

Alex Wilson
  • 2,421
  • 11
  • 13
  • Hi Alex, I tried adding `transform-style: flat;` as stated in my question but it doesn't rectify the behavior. It is working properly in Chrome and FF so I wonder if there's a work around in Safari to get it working. – alchuang Jul 31 '14 at 09:49