CODEWITHSUNDEEP
cssbrowsersafari
user8930932
user8930932

Reputation: 125

transform-style:preserve-3d not working in safari?

I try to take the Parallax Scrolling by transform-style: preserve-3d. It's good in android and chrome, but It is seem not work in Safari. I already use autoprefixer and add -webkit-. Why no effect?

 position: relative;
    height: 100vh;
    overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 400px;
    -webkit-perspective: 400px;

Upvotes: 0

Views: 3205

Answers (2)

user8930932
user8930932

Reputation: 125

I delete these code:

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

It's can work on ios and safari. I don't know why...

Upvotes: 0

Mohit Gupta
Mohit Gupta

Reputation: 739

Please add below css in to you css code -webkit-backface-visibility: hidden; /* I added this */

This will work on above version of safari of 3.1, 3.2.

Also please check this url: https://caniuse.com/#feat=transforms3d

Upvotes: 1

Related Questions