This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

CSS tricks: how to fix blurry CSS animations in Chrome

I completed a project recently that made use of several CSS animations.

They were central features of the project; A 10ft wall display to be used at a conference stand, with accompanying iPad that attendees were invited to use.

With the iPad attendees could trigger cool animations and counters to go up on the big screen. The overall aim was to provide a point of interest to draw attendees to the stand.

One issue I faced whilst programming the animations was an unwanted blur that occurred as one of the shapes scaled up and down in size. A bit vague? Yes. Let me show you an example:

Unwanted CSS animation blur when elements in the background have their scale altered
Unwanted CSS animation blur when elements in the background have their scale altered

In the above gif there are two square div elements that sit on top of each other. Both elements have a border radius of 50%. The x and y positions have been translated to -50% to ensure they are positioned exactly at the same point. The animation scales up one of the divs to 125%. In chrome, as the animation is renders, the text blurs (chrome v 74.0.3729.169 at the time of writing).

The fix


I tried various CSS adjustments, including:

  • -webkit-font-smoothing: antialised;
  • backface-visibility: hidden;
  • transform: translateZ(0);
  • -webkit-font-smoothing: subpixel-antialiased;

Some didn't work, some caused the blur effect to stay visible all of the time.

Eventually I happened across this entry on stack overflow:

https://stackoverflow.com/a/42...

And indeed the circles had an uneven width and height. Updating the width and height of the inner circle element to an even number fixed the issue!

Experimenting after the project I also found that removing the X/Y -50% translation and manually positioning the circles also fixes the issue.

The issue may be caused by position calculations resulting in sub-pixel results, as the element grows in size over the duration of the animation.

My approach in solving this kind of issue would now be:

  • See if there are any transformations that can be dropped (e.g. translate x/y).
  • Adjust the position / size of the elements.
The animation after updating the size from 319px to 320px
The animation after updating the size from 319px to 320px

Much better! You can see this demonstrated on the following plunkr: https://plnkr.co/edit/4UmcijdFPoF3ZYCdhNj8?p=preview.