Chrome 中的背面可见性损坏（某些平台/版本）

所以我环顾四周，似乎-webkit-backface-visibility功能有点参差不齐。在 Mac 和 Linux 上的 Chrome 18 中，它运行良好。在 Windows 上的 Chrome 18 中，情况并非如此。然而，我见过其他人在 Mac 上运行 Chrome，但它也不起作用。

这是我的测试小提琴：http://jsfiddle.net/csaltyj/TYuL3/

不幸的是，由于我正在做卡片翻转动画，所以我需要使用-webkit-backface-visibility: hidden隐藏卡片的背面。无论如何，是否有一些我可以在 Chrome 上 100% 运行的等效工具？

好吧，我做了一些研究，显然这取决于机器和所使用的镀铬版本。

由于chromium跟随chrome开发，我们可以看到有时会出现这个问题http://code.google.com/p/chromium/issues/detail?id=39044

我找到了 2 个解决方案can't尝试一下，因为这个 CSS 在我的电脑上运行。

• 尝试使用此选项启动 chrome：--enable-accelerated-compositing
• Trying https://stackoverflow.com/a/9276526/460368
• 等待新版本的 chrome ;)

您可以通过以下方式获得灵感that来自 cssplay

CSS :

#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

HTML :

<div id="container">
    <div class="lower">

        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
    </div>
    <div class="upper">
        <img src="cssplay7/owl.jpg" alt="Barn owl" />
    </div>

</div>