CODEWITHSUNDEEP
jquerycsssafaritransform
Duffy Dolan
Duffy Dolan

Reputation: 500

Safari -webkit-backface-visibility isn't working properly

I have a page element that is CSS transforms to flip the front and back of cards.

In Safari, I can't seem to get the front backface to hide or the back to display, likely because the front div's backface isn't hidden as it should be.

It works perfectly in Chrome, but not Safari.

I've found similar issues here, but none of the solutions provided had any effect.

.item-front, .item-back {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}

Here's a fiddle:

http://jsfiddle.net/ddolan/V2gvG/4/

Upvotes: 1

Views: 2964

Answers (1)

kremalicious
kremalicious

Reputation: 1371

Safari currently needs -webkit prefixes for transition and transform. In your fiddle you forgot to prefix transform-style: preserve-3d; in your .item-flipper rules.

Just add -webkit-transform-style: preserve-3d; and you're good to go in Safari too.

Upvotes: 5

Related Questions