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'); });​
This is hardware acceleration and I don't think you can fix this. In my cases when I play with -transform:scale(1.2) happens the same thing. Here is a demo. Rollover in the .normal one (middle): jsfiddle.net/ignaciocorreia/tTa5r/1