Mix-blend-mode: color; not working as expected in Safari

Hello dear, dear Webflow community,

I’m experiencing an issue, where the mix-blend-mode: color; does not work as expected in Safari and I would need your help to fix this.

This is what it looks like in Google Chrome

and this is what it looks in Safari

I tried applying isolation: isolate; to the parent element, but it does not seem to work.

The mix-blend-mode: color; seems to be working fine on the “blog page” (image below)

However, if you hover over it and trigger the animation, it’s the same as the video on the homepage (image below)

My question is: how can I make the site look the same in Safari as it does in Chrome?

Any help would be greatly appreciated, thanks so much guys!


Here is my site Read-Only link: Webflow - Automated Mobile QA on Physical Devices | Mobot

i have experienced the same issue. Would be nice to use difference mode with type over a background video.