Hi, I have a nav with a difference blend mode added to it that affects everything inside it. It works great on all browsers except for Safari where the whole thing just displays as black. See image below. If anyone knows a solution it would be appreciated!
Page: Template
Read-only link: Webflow - TraceVision
Hi there @sebastienkaro, just wondering if you ever found a solution for this issue? I’m having a similar problem where my blending mode works great except on Safari
I see the original post uses a blend mode in combination with a blur filter. Are you using something similar? The site works for me, including mobile.
I’ve noticed some blend modes do not work for me but only in the mobile Safari browser. Desktop is correct.
I’m using a coloured div to make the map underneath it greyscale (using colour blend mode). So no blur filter, might be a bit of a different issue
Here’s my read only link
Too bad Safari doesn’t stay up to date, it might just be out of my control as I haven’t found a workaround yet
In your case (since it’s only grayscale), I’d remove the overlay blend mode element. Then, select your map element and remove the blend mode property. Then apply the ‘grayscale’ filter to the map element.
I’ve tried doing something very similar. I attempted to do the reverse with a color field beneath the map and then attempted to apply the blend property to the map. Same issue in Safari.
Oh great, that works perfectly! I need to learn more about the filters, I hadn’t tried that yet.
Thanks for your help, really appreciate it!
