Css rotate with transition seems to affect the opacity of other elements?

Question

I have this issue with DIV rotation with CSS3 transforms using 1s transition:

On Chrome 23 and Safari 6 on OSX 10.7.5, the font in other containers gets a little darker 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 backward visibility property determines whether an element should be visible or not when it is turned away from the screen, it is usually used when you "flip" the element.

In this case, it seems to have the same effect as adding:

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

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

which causes hardware acceleration to give you a slightly finer (smoother), but more consistent font rendering before and after the transition.

There is also a third option, and this must be added:

 -webkit-font-smoothing: antialiased; 

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

I answered a similar question before, and @mddw posted a comment related to a blog post describing anti-aliasing methods, which seem to be the reason why you see it different during and after the transition.

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

Hope this helps!

Answer 2

-webkit-backface-visibility: hidden;

also worked for me ... adding it to the elements that I converted to

ps I would vote for the previous answer, but I can not, because I do not have enough "reputation", and I do not see how to comment on this.

Answer 3

adding

 -webkit-backface-visibility: hidden; 

for all the elements affected, seems to help in this problem: http://jsfiddle.net/tTa5r/2/

while I'm not sure if this property skillfully does it, it seems to be doing something to render fonts: http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

... not sure I don't like it.

found here: iPhone WebKit CSS animations flicker