Images not rendering with the right quality on Safari

[pk_dev (Peter Kostov)]

I’m experiencing a very odd issue with the marquee on the home page of my client’s site. I’ve created a marquee with logos and I’m using a bit of custom code to animate it. The issue I’m facing is that everything works as expected on Chrome but when I checked on Safari the quality of the images is extremely low and the marquee animation isn’t working 100% right.

Does anyone know why the images are showing much lower quality on Safari?

Also, any ideas why the animation is also broken? After the first loop, it fixes itself, but initially, it does not load all the images.

---

Here is my site Read-Only: Webflow - Octane
([how to share your site Read-Only link][2])

Staging Link
[1]: https://octane-staging.webflow.io/

This is the custom code I’m using for the marquee animation:

@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } } .scroll { animation: scroll 40s linear infinite; } .reverse { animation-direction: reverse; } .marquee-image { -webkit-transform: translateZ(0); }

[Stan (justAnotherDeveloper)]

hi @pk_dev your logo images are a SVG, but they contains an embedded (base64 encoded) PNG pixel image:

this is why are your uploaded images blurry from beginning.

This may happened when you have exported SVG images without noticing of exported format. I saw similar when people exported SVG eg. from Figma.

I didn’t check your infinite marquee custom code but I have posted several time this example you can use and customise to your needs.