Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

css transitions - Backface-Visibility Not Working Properly in Firefox (Works in Safari)

I'm having a problem with the back face-visibilty property. It works how I want it to in Safari/Chrome, but for some reason it's not working correctly in Firefox.

When the box flips, I get a mirror image of the front face.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

2 Answers

+1 vote
by (71.8m points)

This bug has been acknowledged by Mozilla.

The fix is to add transform: rotateX(0deg) to the front and back objects.

Adding backface-visiblity:hidden on the container, as suggested by @yalia, makes the back unresponsive in Chrome, hence that fix should be avoided.

Here's a fiddle with the fix.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
0 votes
by (100 points)

To fix: - Verified!

Add to both object:

transform: rotateX(0deg)

to the FRONT and BACK objects.

Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...