Backface visibility broken in Chrome (certain platforms/versions)

Question

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 1

Answer 1

Alright, I made some research and apparently it depends on the machine and on the chrome version used.

As chromium follows chrome development, we can see this problem appears sometimes http://code.google.com/p/chromium/issues/detail?id=39044

I found 2 solutions I can't try since this CSS works on my computer.

• Trying to start chrome with this option : --enable-accelerated-compositing
• Trying https://stackoverflow.com/a/9276526/460368
• Waiting for a new version of chrome ;)

---

You can get inspire by that from 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

I stumbled across this issue right now, with a prototype of mine. I thought I accidentally changed some essential coding - but no, reverting to previous commits where it definitely worked did not help.

Believe it or not: Restarting Chrome fixed it for me.

Answer 3

I found quite elegant workaround using transition-delay on the opacity to hide it middleway throught the animation.

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;
}

Answer 4

I solved this problem using this css transform-style: preserve-3d;or more accurately this Compass mixin @include transform-style(preserve-3d);

Answer 5

-webkit-transition: -webkit-transform 1s ease-in-out, opacity .1s .5s  ease-in-out;  

Where opacity is on :hover set to 0.

Animation takes 1 second, in a 0.5 second is card invisible because it is aside to user, so this is the time, when opacit => 0 occur in 0.1s. it works nicely.