Using native fullscreen API for toggling fullscreen on safari MacOS and facing this issue, where the element that is supposed to go to full screen has other elements on top. I have tried playing around with z-index with elements coming on top but didn't get any solution out of that. Here's a screenshot of the issue.

The HTML of the code is too complex to put in here.

Here's the function that is used to toggle fullscreen.

enterFullScreen = (ele?: any): void => {
    let doc = document.documentElement;
    if (ele != null) {
      doc = ele;
    }
    
    const docElmWithBrowsersFullScreenFunctions = doc as HTMLElement &
    {
      mozRequestFullScreen(): Promise<void>;
      webkitRequestFullscreen(): Promise<void>;
      msRequestFullscreen(): Promise<void>;
    };
    if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
      docElmWithBrowsersFullScreenFunctions.requestFullscreen();
    } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
      docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
    } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
    } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
      docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
    }
  }

Tried finding if will-change CSS property is used anywhere in the project as mentioned here, but it's not there. Is anybody facing a similar issue?