css rotate with transition seem to affect other elements opacity?

Question

I have this issue with a DIV being rotated with CSS3 transforms using a 1s transition:

In Chrome 23 & Safari 6 on OSX 10.7.5 the font in the other containers gets slightly dimmed, during the .rotate-divs transition.

Any ideas on what causes this and how to avoid it?

http://jsfiddle.net/tTa5r/

.rotate{
  background: green;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.rotate.flip{
  -moz-transform: rotate(540deg);
  -webkit-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}

the flip class is added/removed using jquery:

$('.rotate').on('click', function(){
  $(this).toggleClass('flip');
});​

Answer 1

The backface-visibility property determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element.

In this case, it seems that it has the same effect as when you add:

-webkit-transform: translate3d(0,0,0);

Demo - http://jsfiddle.net/tTa5r/4/

which forces hardware acceleration giving you a slightly thinner (anti-aliased), but a more consistent font rendering before and after the transition.

There is a third option as well, and that is to add:

-webkit-font-smoothing: antialiased;

Demo - http://jsfiddle.net/tTa5r/3/

I answered a similar question before and @mddw posted a comment linking to a blog post that describes the methods of antialiasing which seems to be the reason for why you see a differens during and after the transition.

http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/

Hope that helps!

Answer 2

-webkit-backface-visibility: hidden;

also worked for me... adding it to the elements I have transform on

p.s. I would vote the previous answer up but I cant as I dont have enough "reputation", nor can I see how to comment on it

Answer 3

adding

-webkit-backface-visibility: hidden;

to all affected elements, seems to help with that issue: http://jsfiddle.net/tTa5r/2/

while i'm not sure what this property excatly does it seems to do something to the font rendering: http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

...not sure if i dislike that, though.

found here: iPhone WebKit CSS animations cause flicker