Rasterization & will-change: transform Sample

Available in Chrome 53+ | View on GitHub | Browse Samples

Background

All content that does not have the will-change: transform CSS property will be re-rastered when its transform scale changes. In other words, will-change: transform effectively means "please apply the transformation quickly" without taking the additional time for rasterization. This only applies to scaling that happen via JavaScript manipulation, and does not apply to CSS animations.

More detailed background information is available in the Intent to Ship document.

Live Output

You can see the impact in the sample text below:

always blurry

blurry before Chrome 53

always crisp

HTML Snippet

<div id="container">
  <div id="remainsBlurry">always blurry</div>
  <div id="noLongerBlurry">blurry before Chrome 53</div>
  <div id="alwaysCrisp">always crisp</div>
</div>

CSS Snippet

#remainsBlurry {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#noLongerBlurry {
  transform: translate3d(0, 0, 0);
}

#alwaysCrisp {
  transform: scale(2, 2) translate3d(50px, 0, 0);
}

JavaScript Snippet

window.addEventListener('load', function() {
  requestAnimationFrame(function() {
    var remainsBlurry = document.querySelector('#remainsBlurry');
    remainsBlurry.style.transform = 'scale(2, 2) translate3d(50px, 0, 0)';

    var noLongerBlurry = document.querySelector('#noLongerBlurry');
    noLongerBlurry.style.transform = 'scale(2, 2) translate3d(50px, 0, 0)';
  });
});