Accelerated scale animations do not repaint after tween

[Rob 15 Likes (Newbie)]

I'm using a scale transform, when accelerated using the force3D property the elements are not repainted correct at the end of the animation. I believe this is a chrome/blink bug but I wanted to see if anyone had anything to share on the matter here.

 

The issue can be see here: http://jsbin.com/qehuna

Using a non-accelerated tween is fine: http://jsbin.com/sureza

Accelerated CSS transitions are fine: http://jsbin.com/fomuno

 

As a workaround I've discovered that adding a small non-accelerated transform after the main tween removes the elements from a composite layer and triggers a repaint:
http://jsbin.com/vezaxa

 

This issue is not present in Firefox

See the Pen by qehuna (@qehuna) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Using force3D: "auto" seems to work.

 

http://jsbin.com/yecoku/1

 

You can read about it here, towards the end of the page.

[Jonathan 5,176 Likes (Superhero)]

Hello Rob,

 

This behavior is a browser bug in Chrome, not in GSAP. This happens with 3D transforms. You need to remove 3d transforms at the end of the tween.

 

So if you are using force3D:true on your tween, then you would need to set force3D:false on the element in the GSAP onComplete it will work:

 

Working example (test in chrome): http://jsbin.com/sededotoqi/1/edit?html,css,js,output
 

////////////////////////////////////
// using onComplete with force3D true/false
var zoomed = false;

$('.map').on('click',function(e) {
   var scale = zoomed ? 1 : 3;
   TweenMax.to(e.delegateTarget,1,{
      scale: scale,
      force3D: true,
      onComplete:function(){ 
         TweenMax.set('.map',{force3D: false});
      }
  });
  zoomed = !zoomed;
});

////////////////////////////////////
// or using force3D:"auto"
var zoomed = false;

$('.map').on('click',function(e) {
   var scale = zoomed ? 1 : 3;
   TweenMax.to(e.delegateTarget,1,{
      scale: scale,
      force3D: "auto"
   });
zoomed = !zoomed;
});

:

Chrome is taking the original size of the CSS before animating, and treating it as an image, THEN scales it slightly again, producing the blurriness. That is why in your workaround you have to scale it up slightly to fix the blurriness. This bug has been around awhile.

 

Chrome does this same thing when scaling text. But sometime also animates the text blurry but then the text becomes crisp again after the animation completes.

 

Three ways to fix it.. 

1.  Is to do like you did, and adjust the scale using GSAP callback onComplete .. with in CSS transitions you would use JS to detect the transitionend event to adjust the scale in a callback.
    
2. Setting force3D:"auto" on your tween and /or setting force3D:false at the end of your tween using onComplete
    
3. The third way is to start your transforms big and then scale down. You would basically write your CSS in it's end state, and then scale the element down for it's normal state

Chrome Bug:

https://code.google.com/p/chromium/issues/detail?id=224913

Example of this bug, open in Chrome: http://jsbin.com/elofal/1/quiet

 

Resources:

http://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit

http://stackoverflow.com/questions/4641522/how-to-force-re-render-after-a-webkit-3d-transform-in-safari/4847445#4847445

http://stackoverflow.com/questions/6975725/background-image-blurry-when-scaling-on-ipad-and-iphone?lq=1

http://viget.com/inspire/webkit-transform-kill-the-flash

 

I hope this helps!

[GreenSock 8,117 Likes (Superhero)]

Make sure "auto" is in quotes - it's a string

 

Like Jonathan said, you can set force3D:"auto" if you want GSAP to automatically switch back to 2D transforms at the end of the tween (assuming you don't have any 3D properties set). 

[Rob 15 Likes (Newbie)]

Hey guys, thanks for the information. The reason I want 3d enabled for the transform is to give the extra boost to performance, the scale is noticeably jerky without it I'm guessing due to lack of acceleration on 2d transforms.

 

I'm going to try your suggested workaround by scaling from having my end state as the default.

 

The bug you mention is about css animations. As per my examples css animations are fine now. Possibly in the process of fixing that they seems to have broken javascript animations somewhere along the line.

 

 

That bug claimes to have been fixed and merged in may and from my CSS transform example that appears to be true.

 

I've opened a new issue specifically about JavaScript tweens being broken now in the latest canary 40.

 

https://code.google.com/p/chromium/issues/detail?id=425747

 

Thanks for your help as always.