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
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/
I have already tried not to use Z-index -1
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.
Why don’t you just design the blur in illustrator, export as a SVG, and stick it in the same position?
Thanks for your tips guys !