CODEWITHSUNDEEP
javascriptcssreactjsfirefoxcss-transforms
user9723618
user9723618

Reputation:

Transform property does not work in Firefox but does in Chrome and Safari. What to do?

Udate

Appeal for consistency - Mozilla bug

Udate

Adding

  transform: rotateY(0deg);

to one side of the card, is a temporary fix that needs to be fixed properly.

The duplicate does not affect this solution and is vague.

Question

Particularly the backface-visibility here:

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden;
}

I tried adding the -moz- prefix despite it supposedly not being needed according to caniuse:

Still it does not work. Chrome worked without any prefix and Safari worked with -webkit- prefix contrary to caniuse.com.

Here is the jsfiddle. Clicking on the icon should make the icon rotate 180 degrees.

Upvotes: 1

Views: 132

Answers (1)

James
James

Reputation: 1065

Add rotateY(0deg) to your .card__face--front class.

.card__face--front { transform: rotateY(0deg); }

http://jsfiddle.net/3h0cgukf/

Upvotes: 1

Related Questions