I'm trying to construct a fixed navbar, such that the background is blurred, buttons and images stay styled as they're styled, but the menu item text adjusts to properly contrast to the underlying color as the background scrolls.
I'm very very close, but can't seem to get it to work in a cross-browser kind of way (I really thought the days of this were mostly behind us :( ).
Here's what it looks like on Safari.
Navbar over light background:
Navbar over text on light background:
Navbar over text on dark background:
That's pretty much good enough (although I'd ultimately like the text in that last image to be white instead of brown/sepia). The problem is, all of that is in Safari, but when I look at it in Chrome or Firefox, I get
The amusing/frustrating thing about that is, I couldn't get it to work in Safari at all (you couldn't have both a filter and a mix-blend-mode), without applying this fix which was specified for Chrome!
The suggestion there is to "add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied" to deal with a bug in Chrome 90 (the answer is about 18 months old).
Here's a sample of what it looks like:
// backdrop-blur for the whole navbar
<header class="sticky backdrop-blur top-0 left-0 z-[1100] w-full">
<nav>
<ul class="flex justify-between ml-auto">
// a text element that uses mix-blend-difference to generate proper contrast
<li class="text-white bg-black mix-blend-difference
[backdrop-filter:opacity(1)]"> // <- this is the hack
Products
</li>
// a styled element that shouldn't change
<li>
<a class="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4
rounded-sm shadow-lg shadow-emerald-800" href="/">
About
</a>
</li>
</ul>
</nav>
</header>
I'd put it in a fiddle, but I don't know how to get Tailwind support there, so you can play with it at Tailwind Play.
Further down in that same question is another answer from about a year ago, that suggest now you can't put the extraneous filter on the same element as the mix-blend-mode, and instead must but it on wrapper element around the blended element. Unfortunately, that not only doesn't fix it for Chrome, it also breaks it for Safari.
It appears that both CSS Filter Effects and CSS mix-blend-mode are theoretically pretty well supported, but either that's not true, or I'm doing something wrong.
Any ideas on how I can get this to work in a cross-browser compatible way?
