Webkit backface visibility not working

Question

I\'m building a simple example to flip a card using the -webkit-transform: rotateY property.

It was working fine a couple of days ago, but all of a sudd

Answer 1

Interestingly enough, if you set opacity to anything other than 1 (say, .99), suddenly the backface-visibility will come into effect.

Answer 2

I had a similar problem with children of such an element when a child had a webkit-transform. I noted that I had to set the backface visibility on that element as well:

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

So the solution is to use as well:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}

Answer 3

I've encountered this problem in multiple versions of Chrome on Windows XP, including Chrome 24.

This fixed it:

1. Open chrome flag editor via this URL:
   

     chrome://flags/
   

2. Enable the following setting:
   

   Override software rendering list Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations.

3. Also make sure that accelerated CSS animations are enabled.

The fact this resolved the problem suggests Chrome considers my system an "unsupported system". As such your mileage may vary depending on Chrome's impression of your system.

Answer 4

I read somewhere that it is something to do with the host pc's GPU power. This works for me on every device that has a decent GPU. Proof for this is the fact that it doesn't work for me on a Dell Mini, even after a Fresh OS install (win8) and on an old XP machine. The problem is, back-face-visibility is there, but isn't called, meaning that I cannot use javascript to detect this.

Check for http://amproductions.org

Answer 5

It seems that it's not quite stable on Mac, I left chrome for a couple of hours with page with animation working and when I came back back-visibility just stop working. Chrome restart helped to solve the problem.

Answer 6

Just put this -webkit-transform:rotateY(0deg);, you need to tell the browser which is the front face first.