Looks like a Safari bug, though I think the fullscreen API design is a little silly too .
The reason you have to click twice is because the toggle fullscreen method looks for the
document.webkitFullscreenElement to detect if it is already in fullscreen mode. If you change pages, this will be null, as the element that triggered the fullscreen is now gone. It appears this is the recommend way to detect if the view is in full screen is to look at this variable (which is silly opposed to using a dedicated function). Since other browsers kick you out of the page on a URL change it wouldn’t be an issue for them.
I don’t know of another way to detect full screen, but maybe others have found a method. The workarounds I can think of otherwise would be:
- put the entire site in an iframe, and have the main parent be what goes into fullscreen mode
- explicitly call the exit fullscreen api when changing URLs to bring the behavior inline with other browsers.
Both of these would require a bit of custom code.