css - Chrome 中的背面可见性损坏(某些平台/版本)

Question

所以我环顾四周，似乎 -webkit-backface-visibility 功能有点参差不齐。在 Mac 和 Linux 上的 Chrome 18 中，它工作正常。在 Windows 上的 Chrome 18 中，它没有。但是，我看到其他人在 Mac 上运行 Chrome，但它也无法正常工作。

这是我的测试 fiddle :http://jsfiddle.net/csaltyj/TYuL3/

不幸的是，因为我正在制作卡片翻转动画，所以我需要使用 -webkit-backface-visibility: hidden 来隐藏卡片的背面。有没有我可以使用的等效项，无论怎样，它都可以在 Chrome 上 100% 运行？

Answer 1

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

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

我找到了 2 个我不能尝试的解决方案，因为这个 CSS 在我的电脑上工作。

• 尝试使用此选项启动 chrome:--enable-accelerated-compositing
• 正在尝试 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>