10

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 18 on Windows, it does not. However, I've seen other people running Chrome on Mac where it also does not work.

Here is my test fiddle: http://jsfiddle.net/csaltyj/TYuL3/

Unfortunately, since I'm doing a card-flip animation, I NEED to use -webkit-backface-visibility: hidden to hide the back face of the card. Is there some equivalent I can use that works 100% on Chrome, no matter what?

4
  • You might have to be more specific about your Chrome version and OS. I am running 18.0.1025.168 m on Windows 7 64bit and the example in the link provided by @Shikiryu works great May 3, 2012 at 6:45
  • Same Chrome version on WindowsXP, it works fine too May 3, 2012 at 10:27
  • This can happen in Chrome 26, as well.
    – wprl
    Apr 9, 2013 at 22:18
  • I have this issue with Android 9 and the latest chrome version there (25.03.2019).
    – Tigerware
    Apr 13, 2019 at 10:53

5 Answers 5

5
+250

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.


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>
9
  • Doesn't work for me in my Chrome install on Windows. As I said, there's an issue with -webkit-backface-visibility and I need a workaround. I mouse over the card and it flips over (without perspective) and shows the owl backwards. May 2, 2012 at 21:21
  • @CaptSaltyJack - would you be able to add a JSFiddle of the problem you describe in the above comment? May 3, 2012 at 6:55
  • @CaptSaltyJack that's weird, it works fine on my Chrome / windows 7 64bits
    – Shikiryu
    May 3, 2012 at 8:42
  • @MyHeadHurts I can't really do that, because on a lot of machines it will look just fine. It's not the code, it's Chrome. I have another idea though, try viewing my JSFiddle above in Safari. And try your CSSPlay link in Safari too. May 3, 2012 at 18:38
  • 1
    @Shikiryu Tried your updated code. Does not work in the instances of Chrome and Safari that are experiencing this bug. Sorry. May 4, 2012 at 14:49
5

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;
}
1
  • The only issue is, the backface would occasionally disappear on rotate for the versions of Chrome that actually worked previously! I therefore had to use Modernizr to do a browser sniff and check for whether the browser supported csstransform3ds, then only add the opacity to the versions of Chrome that didn't, using the class .no-csstransforms3d. Hope that helps someone!
    – Desmond
    May 24, 2013 at 5:32
3

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.

4
  • Wow. A simple browser restart solved it for me too. Using Chrome Version 27.0.1453.116 on OS X 10.8.4. Jul 3, 2013 at 21:12
  • Same happened to me. On Windows 8 x64 30.0.1599.101 m
    – Leonel
    Oct 29, 2013 at 1:08
  • ...must resist urge to include well-known xkcd and IT Crowd references! Jan 19, 2015 at 14:15
  • 1
    Damn, now I restarted my Chrome with many many tabs open, and it didn't do anything :/
    – amoebe
    Apr 24, 2016 at 17:23
2

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

0
-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.

1
  • It's not working either in my case. Because that's still half a second on the flipping back transition. And so it reappears at the worse moment on the way back. For the way back, we would need the opacity to increase after the first 0.5s.
    – Kir Kanos
    Oct 22, 2014 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.