Animated SVG blurry in Chrome, looks fine in Safari

Design help General
1

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)

2

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

3

Safari

image
image985×624 15.4 KB

Chrome

image
image1082×701 47.2 KB

4

This is what I see:

Chrome

Screen Shot 2020-07-06 at 12.35.00 PM
Screen Shot 2020-07-06 at 12.35.00 PM2550×1958 148 KB

Safari

Screen Shot 2020-07-06 at 12.35.19 PM
Screen Shot 2020-07-06 at 12.35.19 PM2548×2660 197 KB

5

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

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

6

In a Published link.

7

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

8

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.

9

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

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

1 Like
11

Yeah Vreeken comes from Holland / Netherlands :slight_smile:

1 Like