I’ve created a reveal animation using an SVG mask to reveal the content of the page. The animation works perfectly on Chrome and other browsers. However, on iPhone iOS 16 and macOS Safari, the SVG is not revealing the content as expected.

    <svg id="overlay-svg" width="0" height="0" viewBox="0 0 0 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <filter id="displacementFilter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      </filter>
      <mask id="rectMask">
        <rect width="200" height="5" rx="2.5" ry="2.5" fill="white" class="loader-reveal" transform="translate(100 100)" />
      </mask>
    </defs>
    </svg>

Here’s the CodePen link to my project. https://codepen.io/10daer/pen/VwJvgON

Issue Description:
The reveal animation functions correctly on Chrome and other browsers.
On iOS 16 (iPhone) and macOS Safari, the SVG mask does not reveal the content.

I’ve ensured the SVG and GSAP animations are correctly implemented.
The problem only persists on Safari browsers, specifically on iPhone iOS 16 and macOS.
I’ve tested on different devices and the issue seems consistent on Safari.

Questions:

• Is there a known issue with SVG masks and animations on Safari, especially on iOS 16 and macOS?
• Are there any workarounds or fixes that can ensure the reveal animation works on Safari as well?
• Is there a more compatible way to implement this SVG mask reveal animation that ensures cross-browser functionality?

Any help or suggestions would be greatly appreciated!
Thank you in advance for your assistance.

I’ve ensured the SVG and GSAP animations are correctly implemented.
The problem only persists on Safari browsers, specifically on iPhone iOS 16 and macOS.
I’ve tested on different devices and the issue seems consistent on Safari.