This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Css Flipping Element Working Improperly

  • 4 replies
  • 1 has this problem
  • 4 views
  • Last reply by user1929

more options

I am a website developer for an internet security company and when i go to look at the website in any other browser it works fine i am only having issues with Firefox and did not know if there was a way to work on fixing it

I am a website developer for an internet security company and when i go to look at the website in any other browser it works fine i am only having issues with Firefox and did not know if there was a way to work on fixing it

All Replies (4)

more options

Can you share a link to the page where you're seeing this issue so that we can see what's happening?

more options

You can check the Web Console for error messages.

You can also search the MDN website for more information about CSS properties in Firefox.

more options

I believe this is the same bug as:https://bugzilla.mozilla.org/show_bug.cgi?id=1201471 . Quoting one of the people in that bug:

I think our behavior matches the current spec, although I admit that the spec is very hard to follow. The problem is that the element with class="front" has no transform, which I believe means it does not participate in the 3D rendering context as described in https://drafts.csswg.org/css-transforms/#transformed-element-hierarchies . This, in turn, means that backface-visibility shouldn't do anything. That said, I think the spec is a mess and it's clear neither than this is actually what the spec says nor that it's what the spec means to say. Adding 'transform: rotateX(0deg)' to the .front, .back rule fixes this.

Testing on your page, I can confirm that adding this CSS rule:

.front {
	transform: rotateX(0);
}

fixes the problem.