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

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>

此代码应代表一张卡片,正面有"front"div,背面有"back"div.我正在使用该backface-visibility属性以避免在翻转时卡片上出现正面的镜像内容.

如果您在Firefox中打开小提琴,您会注意到单击"翻转"按钮将导致页面右侧出现镜像"翻转"按钮,尽管将backface-visibility前一个div 的属性设置为"隐藏".单击"翻转"按钮(不是镜像按钮)将把卡翻转到其原始位置,镜像的"翻转"按钮将消失.

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

总之,backface-visibility在两种浏览器中都不希望出现该属性的行为.如何更改我的代码,以便镜像内容不可见,并且两个浏览器中的内容仍然可以点击？

更新:将background"后退"div 设置为#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 中运行的唯一一个示例。