Request fullscreen after exit fullscreen mode requires a delay on Safari

I'm working with the Fullscreen API and have run into an issue on Safari. My code:

import { useState } from "react";
export default function App() {
const [fullScreenId, setFullScreenId] = useState<string>("");
const requestFullScreen = async (id?: string) => {
if (document.fullscreenElement) {
await document.exitFullscreen();
// Without this timeout, when we switch from page fullscreen to element fullscreen
// then click exit button, the page turns blank on Safari
await new Promise((res) => setTimeout(res, 100));
}
if (id) {
await document.getElementById(id)?.requestFullscreen();
setFullScreenId(id);
} else await document.documentElement.requestFullscreen();
};
const exitFullScreen = async () => {
await document.exitFullscreen();
if (document.fullscreenElement) await document.exitFullscreen();
setFullScreenId("");
};
const handleClickFullScreen = (id?: string) => {
if (fullScreenId) exitFullScreen();
else requestFullScreen(id);
};
return (
<div className="App">
<button onClick={() => handleClickFullScreen()}>Button 1</button>
<button onClick={() => handleClickFullScreen("fullscreen-target")}>
Button 2
</button>
<div id="fullscreen-target" style={{ backgroundColor: "cyan" }}>
I'm the target element
<br />
<button onClick={exitFullScreen}>Exit</button>
</div>
</div>
);
}

Here's the setup:

• When the user clicks "Button 1", I call requestFullscreen() on document.documentElement.

• Then, when they click "Button 2", I exit fullscreen mode and request fullscreen on a specific target element.

=> What i expect here is we can switch fullscreen on the target element on both Chrome and Safari.

This workflow works perfectly in Chrome. However, in Safari, after entering the fullscreen on the target element, when i exit fullscreen, the page turns blank.

After some investigation, I found that Safari appears to handle fullscreen transitions more slowly. To make it work, I had to add a setTimeout before calling requestFullscreen() on the target element to give Safari enough time to finish exiting fullscreen mode.

The problem is, I want to avoid using setTimeout, since it relies on an arbitrary delay and isn't reliable across devices or browsers.

Is there a better way to handle this in Safari without relying on a timeout?

Thanks in advance!