3

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');
});​
gherkins
  • 14,603
  • 6
  • 44
  • 70
  • 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): http://jsfiddle.net/ignaciocorreia/tTa5r/1/ – Ignacio Correia Dec 28 '12 at 13:12
  • i see - thanks. weird thing is on a website i'm working on this doesn't affect all other elements, but only the ones with css positione: relative ... – gherkins Dec 28 '12 at 13:22
  • That would be something new to me and very interesting to deep in. Would be great if you could share a link. – Ignacio Correia Dec 28 '12 at 13:23
  • As it's a clients project i unfortunately won't be able to provide a link. But i'll try to put the relevant parts in a fiddle. – gherkins Dec 28 '12 at 13:25
  • Sure. I tried in the demo to change to fixed and absolute and it happens also :/ We are CSS. Let me know if you ever find an answer. I'll do the same. – Ignacio Correia Dec 28 '12 at 13:26

3 Answers3

4

-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

Laurence Cope
  • 403
  • 7
  • 20
  • Yes I know but I cant get the rep. I have to add comments like I have above supporting previous solutions. This solution could have helped many many people, but no ones knows because they cant vote up. – Laurence Cope Mar 09 '13 at 14:12
2

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

Community
  • 1
  • 1
gherkins
  • 14,603
  • 6
  • 44
  • 70
  • I find this useful, and `-webkit-font-smoothing: antialiased` doesn't do nothing on my Chrome 24, PC. – vsync Jan 15 '13 at 18:33
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!

Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26