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!