CODEWITHSUNDEEP
htmlcssgoogle-chromesafari
alchuang
alchuang

Reputation: 3571

CSS transition transform z-index conflict in Safari (Works on Chrome / FF)

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

Upvotes: 3

Views: 2898

Answers (2)

Ricardo Martinez
Ricardo Martinez

Reputation: 73

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.

Upvotes: 7

Alex Wilson
Alex Wilson

Reputation: 2419

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;.

Upvotes: 0

Related Questions