Why html5 fullscreen not working with window.history.pushState?

Question

I am using html5 fullscreen api to make a div fullscreen. Based on user interaction/navigation url changes using window.history.pushState but as soon as I change the URL, page exits the fullscreen mode.

And it is happening on all the sites not just my app.

Steps to reproduce:

1. Goto http://davidwalsh.name/demo/fullscreen.php (A nice demo)
2. Then hit Launch fullscreen
3. Now using chrome/ff console try changing the url using window.history.pushState
4. Use following code window.history.pushState(window.location.origin, "show", '/myNewPath');

Now you would notice that URL changes but fullscreen mode exits. Am I doing something wrong here? Let me know if you guys need more info.

Answer 1

I've noticed this issue as well, basically any pushState will kick you out of full screen mode. I've been following this for a while and a fix should be coming soon according this thread:

https://code.google.com/p/chromium/issues/detail?id=138324

It seems they finally amended it, so these two should finally play nice together.

Answer 2

You have to notice that the browser refresh, so it must exit from fullscreen mode.

If you wanna stay on fullscreen mode, you must stay on the same page, and prevent from exiting / refreshing the page, and use AJAX to manage your navigation and links and load content in the same page.