Ошибка разницы в режиме наложения в новых версиях Safari? ⇐ CSS

[Anonymous]

Возможно, это немного крайний случай, но на этом веб-сайте, который я создал, есть своего рода заставка с разницей в режимах наложения, непрозрачность которой устанавливается на 100 % после бездействия:
css :

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

#bg{
background-image:repeating-linear-gradient(black 10px, gray 16px, white 20px, black 17px);
pointer-events: none;
mix-blend-mode: difference;
width: 100%;
position: fixed;
height: 100vh;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
transform: translate3d(0,0,0);
}

скрипт:

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

function startTimer() {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
(x = 1);
document.getElementById("bg").style.transition = "opacity 1s ease-in-out"
document.getElementById("bg").style.opacity = (x)

}, 4000);
}

Это отлично работает в Safari на моем MacBook (версия 16.1), но в более поздних версиях (17 и более поздних версиях) режим наложения работает при загрузке, но после бездействия он снова отображается как сплошной, несмотря на сообщение «разница». " при проверке элемента.


Если я изменю букву (все еще в режиме проверки) и верну ее на разницу, она обновится, и эффект будет работать нормально. Если я изменю CSS заставки на умножение в режиме наложения, весь код будет работать как надо.
Я знаю, что в Safari уже были проблемы с разницей, я попробовал установить белый фон и применение исправления Translate3d. Есть идеи обходных путей? Будет ли что-то подобное исправлено?

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