Базовая маска яркости не работает в Safari? ⇐ Html

[Anonymous]

Просмотрел другие вопросы по этому поводу и не нашел решения моей конкретной проблемы. Я пытаюсь замаскировать загрузчик, который будет покрывать страницу. В центре страницы я хочу «вырезать» прямоугольник через определенный период времени, чтобы обнажить элемент под ним. Я использую маску, которая состоит из прямоугольного элемента полной высоты и ширины, установленного в белый цвет, и второго прямоугольника после этого, установленного в черный цвет, который я позиционирую и размер в соответствии с тем, где я хочу, чтобы этот вырез был, то есть простая маска яркости.
Это работает как на Chrome, так и на Firefox, но Safari, похоже, вообще не играет в мяч, что бы я ни пытался, что удивительно для чего-то такого простого, но я в этом очень озадачен.
Самая простая форма этого кода находится здесь, в этом коде.
И в Chrome, и в Firefox «вырез» работает, при этом красный фон под ним виден во время работы. в сафари нет ничего, кроме черного цвета.
Если бы я догадался, это было бы как-то связано с порядком их применения. Я попытался убедиться, что для режима маски установлено значение яркости, и попробовал все варианты -webkit-mask-composite, а также в том случае, если Safari объединяет прямоугольные элементы иначе, чем ff или chrome, но, похоже, ничего не работает.

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

использование Safari 17.6 на Mac

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