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

Question

当我注意到backface-visibility 属性的值为“隐藏”时，我正在处理我的页面上的旋转 CSS3 转换。我已经在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 中打开 fiddle，您会注意到单击“翻转”按钮将导致页面右侧出现镜像的“翻转”按钮，尽管将 backface-visibility 属性设置为“隐藏”对于前面的 div。单击“翻转”按钮（不是镜像的）会将卡片翻转到其原始位置，并且镜像的“翻转”按钮将消失。

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

总而言之，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 中运行的唯一示例。