2 ms·

CSS animations/transitions are very smooth (opacity/transform) and make it easy to implement really cool effects once you understand how they work. The biggest

by XCSme 7y ago

CSS animations/transitions are very smooth (opacity/transform) and make it easy to implement really cool effects once you understand how they work. The biggest drawback and problem I encountered is that Chrome is very, very, bad at maintaining rendering quality in certain situations. The problem is not that the element you are trying to animate gets blurry (eg. trying to animate text, it will be rendered on GPU, thus moved to its own layer, it might become blurry sometimes), but the problem is that OTHER elements on the page are affected. Try to scale-in the logo in top left of the page? Great, now the text in right sidebar starts jiggling while the animation is running. Want to turn around an image on hover? No problem, only that the SVG icons on the page now have a line artifact through them. Those issues only happen in Chrome, which seems to try too hard (and to have also tried) to optimize for performance over quality.

akseln 7y ago
Whilst I wholeheartedly agree, there is a quick fix for some of the issues: adding the will-change property can significantly improve chrome performance. Especially for animations that might run a lot
- 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

by XCSme 7y ago

akseln 7y ago

Whilst I wholeheartedly agree, there is a quick fix for some of the issues: adding the will-change property can significantly improve chrome performance. Especially for animations that might run a lot

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