Backside-Visibility Not Working in Ie10 - Works Fine in Webkit

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

I came up against this glitch too and it is definitely a glitch.

The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

(See also answer at https://stackoverflow.com/a/14507332/2105930)

I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.

Backface-visibility not working in IE10?

This ended up working for my problem ->

Demo here - demo

Html

<div class="panel">
        <div class="card front">
          <img src="images/panel.svg" height="100%" width="100%"  />
        </div>

        <div class="card back">
          <h4>User Experience</h4>
          <p >
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
         </div>

CSS

.panel
{
-webkit-perspective: 1000;
-ms-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.panel, .card {
width: 80%;
height: 80%;
position:absolute;
top:0;
left:0;
background-color: #fff;
}
.card {
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid_4 .back {
position: relative;
text-align:center; min-height: 100%;height: auto !important; width: 100%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .card {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
transform: rotateY(360deg);
}

Problem apparently is that Preserve-3D doesn't work in IE. There are a few changes - Instead of making the 'card' turn, the actualy 'container = panel' is made to turn.

Css3 perspective-property not working in IE10

I have no clue why you have xpersepective in your CSS, IE10 is unprefixed in CSS, however the perspective property must have some kind of unit for the depth, perspective: 1000 won't be applied because the browser doesn't know what unit it is in, similarly like width and height, etc, you have to apply px, em, etc. The only browsers that assume units (and in pixels) on the perspective property are Webkit browsers, and only when it is inside the transform property.

If you do a little research you, Microsoft states:

The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

So for now, you'll just have to implement the advised fix, if you want to go down that road.

If not, you're lucky. I spent time trying to make it transition smoothly over. Originally in your fiddle, you were transforming it very awkwardly and had too many styles, in my opinion, so the techniques in this JSfiddle should help: http://jsfiddle.net/NAy2r

Explained fiddle

So basically the front content exists in the container div, while the back content exists in the back div, which exists inside the container div. This is very similar to Apple's HTML5 Card flip demo, however there is a twist when it comes to backface-visibility.

At the time that Apple relased that demo, backface-visibiity didn't work on Chrome or Firefox. Chrome had some concept of perspective, but none of backface-visibility, so when you flipped an element, you'd still see through to the back and the content of the back would show through both sides as well; However on Safari, it'd be perfect because it initially understood these concepts.

In further updates of Chrome in the months afterwards, Chrome understood the property, however it was applied literally and the back was hidden completely, regardless if you flipped it or not! What would be the point of having this property if it was going to hide the back completely no matter what? You could just apply display:none, etc, to show the back if you wanted!!

And that is where IE stands as of today, it as well doesn't recognize the 'back' of the element (an element with transform:rotateY(180deg) is considered to be the backside) like other modern browsers do. So when the element is flipped, backface-visibilty: hidden is taken literally as it was in Chrome!

So this fiddle listens on an AnimationStart event on the container div, and on the animation start, it finds the duration of the animation and it uses that to calculate halfway though the animation, so when the animation is halfway, it changes backface-visibility to visible, that way the animation smoothly transitions like it's supposed to.

This was a pain to develop, IE10 is somewhat inconsistent, as it needs time to process it the first time (probably the jQuery). Notice the relief, lack of headache and fiery red eyes. The air around you has become cooler and you can finally breathe, because now you're not alone.

Edit: I forgot to add, that if your animation or transition has a different timing, the timing in this script will have to be adjusted, as it only works with linear transitions, as of now...

Backface visibility broken in Chrome (certain platforms/versions)

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.

Trying to start chrome with this option : --enable-accelerated-compositing
Trying https://stackoverflow.com/a/9276526/460368
Waiting for a new version of chrome ;)

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>

-webkit-backface-visibility doesn't work in node-webkit on Windows

Well, it sounds like a bug. It might be the same issue that causes WebGL not to be available with specific hardware/driver combinations on Windows:

https://github.com/rogerwang/node-webkit/wiki/Webgl-support-on-windows

On Windows with some hardware and driver, WebGL won't work until you copy D3DCompiler_43.dll and d3dx9_43.dll to node-webkit's directory, or install DirectX 9 redistributable.
For license reasons we cannot ship those DLLs.

This seems to have fixed a similar problem with backface-visibility reported here:
CSS: backface-visibility and perspective doesn't work

It WORKS! Thanks a lot! I've added two dll files two node-webkit package and it works!

background-clip: text and backface-visibility: hidden not working as per Can I Use

Both background-clip and backface-visibility work in all major browsers. The problem is that browsers such as Chrome require the -webkit prefix, whereas browsers such as Firefox merely support it.

As such, you want -webkit-background-clip: text in addition to the regular background-clip: text, and -webkit-backface-visibility: hidden in addition to backface-visibility: hidden. The former will work for Webkit browsers (like Chrome), and the latter will work with Firefox.

The following will work in both Chrome and Firefox:

p {

  margin: 1em 0;

  padding: 1.4em;

  background: linear-gradient(60deg, red, yellow, red, yellow, red);

  font: 900 1.2em sans-serif;

  text-decoration: underline;

}

.text {

  background-clip: text;

  -webkit-background-clip: text;

  color: rgba(0, 0, 0, .2);

}

.hidden {

  transform: rotateY(180deg);

  -webkit-transform: rotateY(180deg);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}

<p class="text">The background is clipped to the foreground text.</p>

<p class="hidden">HIDDEN</p>