Animated SVG blurry in Chrome, looks fine in Safari

[Wouter_Schreuders]

Hi All

I made a little animated logo reveal in KeyShape, exported it as Keyshape JS animation and then imported it as an HTML embed. Works perfectly, except for some reason the SVG is super pixelated in Chrome, look fine in Safari.

Does anyone know of a way to get it to render properly in Chrome?

---

Here is my site Read-Only: https://preview.webflow.com/preview/coronation-sped-up?utm_medium=preview_link&utm_source=designer&utm_content=coronation-sped-up&preview=b81a2416a229496a0de806285abf17a9&mode=preview
(how to share your site Read-Only link)

[peej (PG Gonni)]

Looks fine on my end. Maybe you could share screenshots comparing the two?

[Wouter_Schreuders]

Safari

Chrome

[peej (PG Gonni)]

This is what I see:

Chrome

Safari

[peej (PG Gonni)]

Are you seeing this issue in the Webflow Preview, or on a published link?

If it’s the latter, please share your published link

[Wouter_Schreuders]

In a Published link.

Coronation - It all comes to down to Trust

[peej (PG Gonni)]

I see it now, strange. Have you tried using a Lottie animation instead?
I’ve never had any issues with Lottie files.

[Wouter_Schreuders]

I’ll give it a shot. It exports to Lottie so that’s probably the quickest way to try, otherwise I’ll have to reacquaint myself with After Affects.

[mastermindesign (James Vreeken)]

@Wouter_Schreuders its because of the scaling you have on the html-embed… remove that and then instead of width 250px put that as the width you’d like it to display and then probably also set a max width on that to 100% so it downscales on mobile.

[Wouter_Schreuders]

This worked! Amazing, you’re a star, thanks James (is Vreeken a Dutch surname?)

[mastermindesign (James Vreeken)]

Yeah Vreeken comes from Holland / Netherlands