Css Flipping Element Working Improperly
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)
Can you share a link to the page where you're seeing this issue so that we can see what's happening?
You can check the Web Console for error messages.
- https://developer.mozilla.org/en/Tools/Web_Console
- https://developer.mozilla.org/en/Tools/Page_Inspector
You can also search the MDN website for more information about CSS properties in Firefox.
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.