Scaling and will-change in Chrome

[OSUblake 9,990 Likes (Superhero)]

Looks like scaling and will-change issues have been fixed in v59 of Chrome. No more rasterization at a low scale, or jumping at the end of a transform. 

 

 

See the Pen 23844633e55bacc7ca1ae1b23d51911a?editors=0010 by osublake (@osublake) on CodePen

 

 

And using will-change can provide a nice performance boost. Compare the CPU usage between these two demos. In the demo above, you should notice the CPU rise as the image gets larger. This is because it creates a new raster every time the scale changes, so the larger the image, the more the CPU has to work.

 

In the demo below, the CPU usage should be relatively flat as it will use the same raster throughout the animation. While this may improve performance, the overall quality may not look as good, particularly at lower scale levels. 

 

 

See the Pen 9209f5d393ed81294a0530bccf363195?editors=0010 by osublake (@osublake) on CodePen

 

EDIT: This is only for graphics. Scaling text is still an issue.

 

 

[Jonathan 5,176 Likes (Superhero)]

Fixed, until they break it again. Thanks for letting us know

[OSUblake 9,990 Likes (Superhero)]

31 minutes ago, Jonathan said:

Fixed, until they break it again. Thanks for letting us know

 

We already predicted that!

 

I noticed that Polymer removed will-change: transform from their animations. And then I noticed that v59 broke animations where I was using will-change. It was rasterizing stuff at a low scale value. 

 

 

If you're using will-change, you might want to go check to make sure everything looks ok.

 

[GreenSock 8,117 Likes (Superhero)]

Thanks for posting this info, @OSUblake. Super helpful.