4 ms·

Whilst I wholeheartedly agree, there is a quick fix for some of the issues: adding the will-change property can significantly improve chrome performance. Especi

• XCSme 7y ago
  The `will-change` property is just a flag for the browser to move the element to its own layer, it does not fix the rendering issues. I tried all fixes I could find on the internet, nothing worked. Just Google for "blurry animation chrome". Some suggested fixes are: -webkit-font-smoothing: antialised; backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; But most of the times they don't do anything or just make things worse. The only solution is usually to move your elements fractions of a pixel until Chrome is happy. The problem is that if you have a responsive website (or a container that is scaled with a transform), it's impossible to have all elements pixel-perfect aligned on all resolutions. Although they look fine when rendered normally, when adding animations things will get blurry. And because it does not happen in other browsers, it means it's not a limitation of the GPU or monitor to display sub-pixel content. eg: https://bugs.chromium.org/p/chromium/issues/detail?id=521364 https://bugs.chromium.org/p/chromium/issues/detail?id=521364