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:
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.
Much better! You can see this demonstrated on the following plunkr: https://plnkr.co/edit/4UmcijdFPoF3ZYCdhNj8?p=preview.
