CODEWITHSUNDEEP
csswebkittransformcss-transitions
gherkins
gherkins

Reputation: 14983

css rotate with transition seem to affect other elements opacity?

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');
});​

Upvotes: 3

Views: 6038

Answers (3)

Laurence Cope
Laurence Cope

Reputation: 422

-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

Upvotes: 4

Christofer Vilander
Christofer Vilander

Reputation: 18042

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!

Upvotes: 1

gherkins
gherkins

Reputation: 14983

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

Upvotes: 2

Related Questions