Anime: Scaling SVG is now blurry in Chrome.

[ndimatteo]

As of today, all of my SVG elements that I'm scaling with Anime are showing up blurry during the animation in Chrome. See below:

Why is this happening all of a sudden?

[ndimatteo]

I can confirm that this doesn't happen in Firefox (v46) or Safari (v9) on a Mac, just with Chrome (v53.0.2785.101)

[harrynewsome]

I am experiencing this too.

[ndimatteo]

@harrynewsome

I've found a temporary fix with a CSS hack. Apply the following to your svg:

svg {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}

Not ideal, but seems to do the trick.

[harrynewsome]

@ndimatteo I'm not using SVG's but it fixed the issue nonetheless.

Thanks! 🎉

[juliangarnier]

Unfortunately I think this is related to a change in the Blink rendering engine or something like that. backface-visibility: hidden; sounds like a good solution for now thanks!