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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
CaptSaltyJack
  • 15,283
  • 17
  • 70
  • 99

5 Answers5

5

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>
Community
  • 1
  • 1
Shikiryu
  • 10,180
  • 8
  • 49
  • 75
  • 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. – CaptSaltyJack May 02 '12 at 21:21
  • @CaptSaltyJack - would you be able to add a JSFiddle of the problem you describe in the above comment? – My Head Hurts May 03 '12 at 06:55
  • @CaptSaltyJack that's weird, it works fine on my Chrome / windows 7 64bits – Shikiryu May 03 '12 at 08: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. – CaptSaltyJack May 03 '12 at 18:38
  • Also check this link. On a few different machines, the object is NOT hidden when it flips around. http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility&preval=hidden – CaptSaltyJack May 03 '12 at 19:08
  • @CaptSaltyJack - sorry, I'm afraid that they all seem be be working in Chrome and Safari for me. What version of Windows are you using? – My Head Hurts May 04 '12 at 07:43
  • Windows XP and Windows 7. And various co-workers of mine are on Mac OS with Chrome, and the backface visibility works most of the time but not always. Same exact build of Chrome, too. Makes no sense. If you Google around a bit, you can see this is an issue and no one really has a solution. – CaptSaltyJack May 04 '12 at 14:04
  • 1
    @Shikiryu Tried your updated code. Does not work in the instances of Chrome and Safari that are experiencing this bug. Sorry. – CaptSaltyJack May 04 '12 at 14:49
  • been waiting for a new version of Chrome. 5 years almost since your answer. apparently Google has no money to get some developers solving this shit. and a ton of other shit. – vsync Mar 02 '17 at 13:33
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;
}
Ahtenus
  • 565
  • 6
  • 11
  • 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 '13 at 05: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.

Michael Jess
  • 1,907
  • 1
  • 19
  • 17
2

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

Graham P Heath
  • 7,009
  • 3
  • 31
  • 45
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.

Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
dimitry
  • 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 '14 at 16:06