Blending effect 'difference' does not work on Chrome

Hi all,

I’m trying to get a navbar which adapts its elements to the background using the blending effect ‘difference’. This effect does seem to work on Safari, but doesn’t work on Chrome.

I basically use two different background colors:

  • Off-white
  • Black

On an


off-white background it should look like this:

On a black background, it should look like this:

However, on chrome it only show the original color (which is the color suited for black backgrounds). Which means that you can’t see the navbar on the off-white sections, because it will look like this:

Does anyone know why the effect is working on Safari, but not on Chrome? And how can I fix this?

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Note: it is working properly on chrome for iPhone… but not on Mac.