theme background image disappears on fullscreen in firefox

[wanderview]

I'm working on some slides and made my own theme to display a consistent background for the deck. I noticed, however, that the image disappears when I enter fullscreen.

I investigated this a bit with this layout guys and it seems that reveal.js can work around the issue by simply requesting fullscreen on documentElement instead of body.

So something like:

        function enterFullscreen() {
                // Use documentElement instead of body to avoid layering issues in some browsers.
                var element = document.documentElement;

                // Check which implementation is available
                var requestMethod = element.requestFullscreen ||
                                                        element.webkitRequestFullscreen ||
                                                        element.webkitRequestFullScreen ||
                                                        element.mozRequestFullScreen ||
                                                        element.msRequestFullscreen;

                if( requestMethod ) {
                        requestMethod.apply( element );
                }
        }

Also note the standard fullscreen method is requestFullscreen() with a lower-case "s". The current code has an upper case "s" in its compat check here.

[wanderview]

Oh, my reduced test case is here:

https://github.com/wanderview/bg-image-bug

And the firefox bug is here:

https://bugzilla.mozilla.org/show_bug.cgi?id=714809

And @annevk thinks there might be a spec issue related to this:

whatwg/fullscreen#40

[upsuper]

I believe all browsers agree with the same behavior that a fullscreen body whose background has been propagated has a black background. This isn't a Firefox-specific thing.

[wanderview]

I believe all browsers agree with the same behavior that a fullscreen body whose background has been propagated has a black background. This isn't a Firefox-specific thing.

I did not get this behavior in chrome. It was unclear to me which of firefox/chrome/spec is wrong. In this case I think it would just be easier for reveal.js to fullscreen the documentElement instead of the body.

[upsuper]

At least in your reduced test case, if you make it webkit-prefixed, you should see the same behavior in Chrome.

[hakimel]

Requesting fullscreen on the documentElement looks like a solid fix. Thanks @wanderview!