Mix-blend-mode: разница с z-index не будет работать должным образом в Safari ⇐ CSS

[Anonymous]

Я разрабатываю веб-сайт-портфолио с размытой панелью навигации вверху. Его z-индекс равен 50, поэтому он остается поверх других элементов:


Или это выглядит так, если пользователь еще не прокрутил:


Но в Safari, вероятно, из-за того, что его z-индекс выше, чем у других элементов, и он не может «смешать разницу» с другим элементом в своем индексе, это выглядит так:

(Вы можете увидеть текст, если присмотритесь.)


Что я могу сделать, чтобы решить эту проблему? Мне очень нравится этот эффект, поэтому я не хочу от него отказываться. Вот коды:
NavBar:

Код: Выделить всё

[list]
[*]
[url=#]{{ $t('routes.home') }}[/url]

[*]
[url=#about-me]{{ $t('routes.about') }}[/url]

[*]
[url=#work]{{ $t('routes.work') }}[/url]

[*]
[url=#blog]{{ $t('routes.blog') }}[/url]

[/list]

Макет:

Код: Выделить всё

Я использую Tailwind, но вы можете предоставить решения с помощью чистого CSS.
Я пробовал изменить z-индекс элементов на равный номер, и кажется, что он работает правильно, но я этого не хочу. Панель навигации должна оставаться сверху, чтобы следовать за прокруткой пользователя.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -on-safari