CODEWITHSUNDEEP
csswebkit
dgiulian
dgiulian

Reputation: 1229

Webkit backface visibility not working

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?

Upvotes: 44

Views: 49034

Answers (7)

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37913

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>

Upvotes: 15

pronebird
pronebird

Reputation: 12240

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.

Upvotes: 1

Luke Madhanga
Luke Madhanga

Reputation: 7457

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

Upvotes: 1

gooberverse
gooberverse

Reputation: 265

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.

Upvotes: 2

So lost rn
So lost rn

Reputation: 349

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

Upvotes: 33

EricG
EricG

Reputation: 3849

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 */
}

Upvotes: 24

Gabor
Gabor

Reputation: 181

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

Upvotes: 18

Related Questions