44

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 sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I'm using the -webkit-backface-visibility: hidden property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)

Here is the code in case I'm doing something terrible bad

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Card Flip Using CSS</title>
    <style type="text/css">
        body {
            background-color: #3d994a;
        }
        h1 {
            font-size: 30pt;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            display: block;
            text-shadow: 1px -1px 0px #4E4E4E;
        }
        #container { 
            -webkit-perspective: 1000; 
        }
        .card {
            position: relative;
            width: 286px;
            height: 392px;
            -webkit-transform-style: preserve-3d;           
            -webkit-transition: all 0.5s linear;           
        }   
        #container:hover .card{
            -webkit-transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            border-radius: 20px;    
            border:1px solid #eee;
            background-color: #FFF;
            box-shadow: #000 3px 2px 4px;
        }
        .back {
            -webkit-transform:rotateY(180deg);  
        }
    </style>
</head>

<body>
    <h1>Hover over the card to flip it</h1>
    <div id="container">
        <div class="card">
            <div class="front face">            
                <img src="images/back.png" alt="" />
            </div>
            <div class="back face">
                <img src="images/front.png" alt="" />
            </div>      
        </div>
    </div>
</body>
</html>

I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible. Also, this example uses this property and also stopped working. So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
dgiulian
  • 1,199
  • 2
  • 10
  • 11
  • I have similar problem regrd in webkit transforms and `-webkit-backface-visibility: hidden;`. Any findings? – wilsonpage Sep 21 '11 at 17:57
  • I don't know why, but mysteriously it fixed. It was probably a bug that got fixed. – dgiulian Sep 30 '11 at 11:17
  • i have the same problem. i wonder if there is any conflict with other css rules – Francesco Oct 13 '11 at 16:41
  • I've got the same problem, but in Safari. The backface of my "front" view is still shown, whereas in Chrome I get the correct effect (the back view is visible as intended). – Cyrille Oct 31 '11 at 17:15
  • 4
    OK, problem solved. LESS did something to my "preserve-3d" value by trying to compute it as a numerical operation. Setting -webkit-transform-style to e("preserve-3d") solves the problem. So it seems that for Chrome, preserve-3d is the defaults, but not for Safari. – Cyrille Oct 31 '11 at 17:24

7 Answers7

31

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

Kevin Gosse
  • 38,392
  • 3
  • 78
  • 94
So lost rn
  • 327
  • 3
  • 4
  • 2
    This fixed a number of issues for me; Flickering between front and back. backface-visibility not working. ::before & ::after elements seemingly on a different z-index to other elements – Turnip Aug 18 '14 at 10:36
24

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 */
}
Ry-
  • 218,210
  • 55
  • 464
  • 476
EricG
  • 3,788
  • 1
  • 23
  • 34
  • EricG, I know that's weird but i just had the same problem because i was doing it exactly YOUR answer's way... and removing the backface attribute on the child made it properly works... that's curious... (i m dealing with shadowDOM) – Anthony Bobenrieth May 07 '14 at 11:33
18

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

Gabor
  • 181
  • 1
  • 2
  • 1
    Please not that opacity is pretty expensive on the GPU – EricG Nov 28 '12 at 10:12
  • That's crazy O_O !! It solved all my problems.......but annoyed me a lot....I would like a lot to find cross browser solution so effective.. – TOPKAT Nov 22 '16 at 21:32
  • Same problem here. Only in Chrome. What on Earth is this all about? You know, when we have to specify 3d rotating planes with backface data using CSS and HTML, we should realize that a good idea, hypermedia, has been taken way way too far. Time for Web 3 and a ground up rewrite – Sentinel Apr 28 '17 at 12:42
  • This, sadly, works. Ho hum. At least I'm only writing prototype code... oh wait... there's no other way to solve it so production: here we come! – philip Jul 31 '19 at 22:50
  • Can someone explain why is this 'working'? Is this a Chrome bug? The same bug does not appeared in Firefox anyway. – marcias Oct 03 '19 at 08:39
  • WTF - after hours of searching this is the only solution that worked for me. Firefox doesn't have this problem. – tjbp Feb 24 '20 at 10:40
13

If you have tested all other options here and nothing worked while this example works on your browser, then please make sure that element corresponding to #card from the example bellow has overflow:visible:

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>
Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
2

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.

gooberverse
  • 265
  • 3
  • 6
1

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.

pronebird
  • 12,068
  • 5
  • 54
  • 82
1

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

Luke Madhanga
  • 6,871
  • 2
  • 43
  • 47