Question

我正在使用页面上的旋转CSS3转换，当我注意到backface-visibility属性的值与“隐藏”值不一致时。我在JSFiddle中重现了这个问题。

HTML：

<div class="card">
    <div class="front">
        <button>Flip to the back face</button>
    </div>
    <div class="back">
        <button>Flip to the front face</button>
    </div>
</div>

此代码应代表正面的“前”div和背面的“背”div的卡片。我正在使用backface-visibility属性，以避免在翻转时卡片上出现正面的镜像内容。

如果您在Firefox中打开小提琴，您会注意到单击“翻转”按钮将导致页面右侧出现镜像“翻转”按钮，尽管将backface-visibility属性设置为“隐藏“为前面的div。单击“翻转”按钮（不是镜像按钮）会将卡片翻转到其原始位置，镜像的“翻转”按钮将消失。

如果您在Chrome中打开小提琴，单击“翻转”按钮不会创建镜像“翻转”按钮，这很好。不幸的是，背面的“翻转”按钮不再可点击。

总之，两个浏览器都不希望backface-visibility属性的行为。如何更改我的代码，以便镜像内容不可见，并且两个浏览器中的内容都可以点击？

更新：将“后退”div设置为background为#FFF（或任何颜色）使其不透明，在Firefox中运行小提琴时隐藏“前”div中的镜像按钮。 Chrome的问题仍然存在。

Answer 1

对于Firefox：只需添加backface-visibility: hidden;也可以上课.card。

请参阅：http://jsfiddle.net/kah4g3ej/9/

对于Crome：似乎背面在Crome中无法点击。解决方法将DIV作为clickCatcher放置，然后依赖于.card.hasClass("flip") .addClass("flip")或.removeClass("flip")。

请参阅：http://jsfiddle.net/zb4L4ftm/3/

对我来说，第一个jsfiddle示例适用于Windows 7和Ubuntu中的Firefox 31.0。

这适用于Firefox，Opera和IE 11：http://jsfiddle.net/zb4L4ftm/8/

但是使用Chrome时，按钮点击似乎无法实现。所以第二个JSFiddle示例是我在Chrome中运行的唯一一个。

浏览器之间的背面可见性行为不一致

1 个答案: