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

Question

所以我看了一下,似乎-webkit-backface-visibility功能有点不稳定.在Mac和Linux的Chrome 18中,它运行正常.在Windows上的Chrome 18中,它没有.但是,我看到其他人在Mac上运行Chrome也无法运行.

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

不幸的是,因为我正在做一个卡片翻转动画,我需要-webkit-backface-visibility: hidden用来隐藏卡片的背面.是否有一些相同的我可以使用,在Chrome上100%工作,无论如何？

Answer 1

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

由于铬跟随铬开发,我们有时会看到此问题http://code.google.com/p/chromium/issues/detail?id=39044

我找到了2个我无法尝试的解决方案,因为这个CSS在我的计算机上工作.

• 尝试使用此选项启动chrome: - enable-accelerated-compositing
• 尝试/sf/answers/649356851/
• 正在等待新版本的chrome;)

你可以得到启发是从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>

Answer 2

我找到了相当优雅的解决方法,使用不透明度的转换延迟将其隐藏在动画的中间位置.

http://jsfiddle.net/TeXTQ/

div {
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration:2s, 0;
    -webkit-transition-timing-function:ease-in-out,ease-in-out;
    -webkit-transition-delay:0,1s;
}
div:hover {
    -webkit-transform: rotateX(-180deg) rotateY(0deg);
    opacity:0;
}