Elements coming on top with safari webkit fullscreen api

Question

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?