Images, gradients, SVGs not loading in Safari

Community resources
1

Hi, I have a big problem with my recent project not working correctly in Safari.

The design has a lot of gradients, I applied most of them just by adding filter blur in webflow but these didn’t work at all in Safari. I added -webkit-filter but it didn’t help much as it didn’t look correctly.

Then I just applied gradients with SVGs - but Safari had problems loading them..

Then I just decided to loose quality and added PNGs compressed to AVIF to make it work.

But even now it loads fine on some pages, on some whole page is a bit laggy when loading and then on 1 page with the largest gradients it’s not working at all.

Please see this page on Chrome and then Safari: Careers

Does anyone know any solution to this, please?

Read only link

2

It works for me in Safari and Chrome. What’s helped me in the past when Safari is being picky is to open Webflow in Safari and see if it renders as intended in the Designer. If not, make the necessary changes and confirm it also renders as intended in Chrome. Unfortunately, this happens sometimes when working with grids and animations.

1 Like