New problem on safari - DIV color with blur effect

[Tanguy_Gall]

Hey everybody

I have noticed display problems on Safari, it’s not the first time, I have had some trouble with this browser lately…

The problem :

I have some div block with color background with a blur effect in absolute position on my hero section and elsewhere.
On chrome, everything is perfect but on Safari the color of my Div Block change or there are squares that appear near to the div block blur.

PS: I have split all my Section with a diagonal SVG, I tried several ways to use svg but nothing changed… So I think it’s not related to the bug.

Here is the squares bug …

On Google Chrome

On safari

Have somebody had the same experience? I really need help, I have to finish the project very soon for my client, and it’s so stressful

---

Here is my site Read-Only: Webflow - Sebastien Gall

Live site : https://sebastiengall-bf9-95cb5125b8b02.webflow.io/

[Tanguy_Gall]

I have already tried not to use Z-index -1

[vincent (Vincent Bidaux)]

Sorry to hear that. CSS filters act differently depending on browser and their support is not optimal. Thay can also bug on Chrome, for other reasons.

I have no solution to offer to you here. The solution will be a design, creative solution, that you have to find. Using a different approach, different structure, trying to limit the use of overlapping elements that use CSS filters. Progress with care on a draft and check compatibility with Safari at each step.

Don’t fight too long when you face those bugs with safari and css filters, it’s not a bug, it’s a support issue.

[Kevin_Mooney]

@Tanguy_Gall

Why don’t you just design the blur in illustrator, export as a SVG, and stick it in the same position?

[Tanguy_Gall]

Thanks for your tips guys !