IE 10 Opacity bug with CSS transitions

  • Post by Nicolas Ramz
  • May 24, 2012
IE 10 Opacity bug with CSS transitions

While adding MS CSS prefixes to 500 photos slideshow, I noticed something was making the transitions blink. With some more tests I found out this was related to CSS transtions. It seems IE 10 (consumer preview) has a little bug which causes opacity to be reset to 0 when CSS transforms are applied.

Here is a simple box with opacity set to 1:

.box{
    width:250px;
    opacity: 1;
    -ms-transition-property: opacity, -ms-transform;
}

Adding the hidden class is supposed to fading to 0 as well as applying a little rotation. This seems to work as expected except that when the transition is over, the box appears, as if opacity was (incorrectly) reset to 1.

.box.hidden{
    -ms-transform:rotateZ(-10deg);
    opacity: 0;
}

A quick and easy way to fix it is to set the opacity to a very low value, like 0.01.

Demo: bug proof

Edit: good news, bug has been fixed in Windows 8 release preview!