CODEWITHSUNDEEP
csscss-transforms
Vince van Noort
Vince van Noort

Reputation: 41

Safari mobile transform-style flat not working

I have been experiencing a weird transform-style bug(?) where an after element clips through text while transform-style is set to flat.

I made a CodePen showing the problem.
Left: transform-style: flat; (what i would like in all browser to look like, only does not in safari mobile)
Right: transform-style: preserve-3d; (how it looks on both sides on mobile)

transform-style: preserve-3d; // how it displays on safari mobile
transform-style: flat; // how i would like to display it on safari mobile

CodePen: http://codepen.io/anon/pen/WRKjZw
Thank you

Upvotes: 1

Views: 1119

Answers (1)

Web Dev Guy
Web Dev Guy

Reputation: 1789

Try this.

transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
-webkit-transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
-ms-transform: rotateX(-40deg) rotateY(20deg) rotateZ(0deg);
transform-style: flat;
-webkit-transform-style: flat;

Upvotes: 1

Related Questions