Have had a look at other questions around this and not found any solutions to my particular issue. What I'm trying to do is mask a loader which will cover a page. In the centre of the page I want to 'cut-out' a rectangle after a certain period of time which reveals an element underneath. I am using a mask which consists of a rectangle element full height and width set to white and a second rectangle after this set to black which i position and size according to where I wan this cutout to be, so a simple luminance mask.

This is working on both chrome and firefox, but safari doesn't seem to be playing ball at all no matter what I try which is surprising for something so basic, but im pretty stumped on this.

The simplest form of this code is here on this codepen.

On both chrome and firefox the 'cut-out' is working, with the red background underneath visible while on safari there is nothing but black.

If I were to guess it'd be something to do with the order these are applied. I have attempted to make sure that the mask-mode is set to luminance and tried every variation of -webkit-mask-composite as well incase safari composites the rectangle elements differently to ff or chrome, but nothing seems to be working.

<svg 
    width="100%" height="100%" 
    className="loader-masker"
>
    <mask id="loaderOverlay">
        <rect fill="white" width="100%" height="100%"/>
        <rect fill="black" x="50%" y="50%" width="50%" height="10%"/>
    </mask>
</svg>

using safari 17.6 on mac