Chrome中的背面显示权限（某些平台/版本） [英] Backface visibility broken in Chrome (certain platforms/versions)
问题描述
所以我看了一下，看起来 -webkit-backface-visibility 的功能有点斑。在Mac和Linux的Chrome 18中，它工作正常。在Windows 18上的Chrome 18中，没有。
So I've looked around a bit, it seems that -webkit-backface-visibility functionality is a bit spotty. In Chrome 18 on Mac and Linux, it works fine. In Chrome 18 on Windows, it does not. However, I've seen other people running Chrome on Mac where it also does not work.
这里是我的测试小提琴： http://jsfiddle.net/csaltyj/TYuL3/
Here is my test fiddle: http://jsfiddle.net/csaltyj/TYuL3/
不幸的是，翻页动画，我需要使用 -webkit-backface-visibility：hidden 隐藏卡的背面。
Unfortunately, since I'm doing a card-flip animation, I NEED to use -webkit-backface-visibility: hidden to hide the back face of the card. Is there some equivalent I can use that works 100% on Chrome, no matter what?
推荐答案
好的，我做了一些研究，显然这取决于机器和使用的chrome版本。
Alright, I made some research and apparently it depends on the machine and on the chrome version used.
由于chrome遵循chrome开发，我们可以看到这个问题有时出现 http://code.google.com/p/chromium/issues/detail?id=39044
As chromium follows chrome development, we can see this problem appears sometimes http://code.google.com/p/chromium/issues/detail?id=39044
我发现2个解决方案无法尝试，因为这个CSS在我的电脑上工作。
I found 2 solutions I can't try since this CSS works on my computer.
- 尝试使用此选项启动Chrome：--enable-accelerated-compositing
- 尝试 http://stackoverflow.com/a/9276526/460368
- 正在等待新版本的Chrome;）
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>
这篇关于Chrome中的背面显示权限（某些平台/版本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
