Streaming live at 10am (PST)

Animated SVG blurry in Chrome, looks fine in Safari

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)

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

Safari

Chrome

This is what I see:

Chrome

Safari

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

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

In a Published link.
https://coronation-sped-up.webflow.io/#Home

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

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.

@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.

2 Likes

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

1 Like

Yeah Vreeken comes from Holland / Netherlands :slight_smile:

1 Like