Grundlegende Luminanzmaske funktioniert in Safari nicht? ⇐ CSS

[Guest]

Ich habe mir andere Fragen zu diesem Thema angesehen und keine Lösung für mein spezielles Problem gefunden. Ich versuche, einen Loader zu maskieren, der eine Seite abdeckt. In der Mitte der Seite möchte ich nach einer bestimmten Zeit ein Rechteck „ausschneiden“, das ein darunter liegendes Element freigibt. Ich verwende eine Maske, die aus einem Rechteckelement mit voller Höhe und Breite besteht, das auf Weiß eingestellt ist, und einem zweiten Rechteck danach, das auf Schwarz eingestellt ist und das ich entsprechend der Position und Größe positioniere, an der ich diesen Ausschnitt haben möchte, also eine einfache Luminanzmaske.
Das funktioniert sowohl auf Chrome als auch auf Firefox, aber Safari scheint überhaupt nicht zu funktionieren, egal was ich versuche, was für etwas so Einfaches überraschend ist, aber ich bin ziemlich ratlos.
Die einfachste Form dieses Codes finden Sie hier auf diesem Codestift.
Sowohl auf Chrome als auch auf Firefox funktioniert der „Ausschnitt“, wobei der rote Hintergrund darunter sichtbar ist, wenn er aktiviert ist Auf der Safari gibt es nichts als Schwarz.
Wenn ich vermute, dass es etwas mit der Reihenfolge zu tun hat, in der diese aufgetragen werden. Ich habe versucht, sicherzustellen, dass der Maskenmodus auf Luminanz eingestellt ist, und habe jede Variante von -webkit-mask-composite ausprobiert, auch wenn Safari die Rechteckelemente anders als ff oder Chrome zusammensetzt, aber nichts scheint zu funktionieren.

Code: Select all

Verwenden von Safari 17.6 auf einem Mac