Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

theme background image disappears on fullscreen in firefox #1621

Closed
wanderview opened this issue Jun 16, 2016 · 5 comments
Closed

theme background image disappears on fullscreen in firefox #1621

wanderview opened this issue Jun 16, 2016 · 5 comments

Comments

@wanderview
Copy link

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
Copy link
Author

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
Copy link

upsuper commented Jun 17, 2016 •
edited
Loading

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
Copy link
Author

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
Copy link

upsuper commented Jun 17, 2016

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

hakimel added a commit that referenced this issue Jun 21, 2016
@hakimel
request fullscreen on documentElement instead of body (#1621 #1624)
a12a17b
hakimel added a commit that referenced this issue Jun 21, 2016
@hakimel
request fullscreen on documentElement instead of body (#1621 #1624)
bac187f
@hakimel
Copy link
Owner

hakimel commented Jun 21, 2016 •
edited
Loading

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

@hakimel hakimel closed this as completed Jun 21, 2016
hbrysiewicz pushed a commit to hbrysiewicz/reveal.js that referenced this issue Oct 7, 2016
@hakimel @hbrysiewicz
request fullscreen on documentElement instead of body (hakimel#1621 h…
2dfb8a8 
…akimel#1624)
KroArtem pushed a commit to KroArtem/UltraSparcT2Plus that referenced this issue Nov 21, 2016
@hakimel @KroArtem
request fullscreen on documentElement instead of body (hakimel#1621 h…
7194394 
…akimel#1624)
SteveDesmond-ca pushed a commit to SteveDesmond-ca/presentations that referenced this issue Apr 19, 2017
@hakimel
request fullscreen on documentElement instead of body (hakimel#1621 h…
b7b4615 
…akimel#1624)
SteveDesmond-ca pushed a commit to SteveDesmond-ca/presentations that referenced this issue Apr 19, 2017
@hakimel
request fullscreen on documentElement instead of body (hakimel#1621 h…
ebe9a74 
…akimel#1624)
derheap pushed a commit to derheap/reveal.js that referenced this issue Feb 22, 2018
@hakimel
request fullscreen on documentElement instead of body (hakimel#1621 h…
18c8d08 
…akimel#1624)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@upsuper @hakimel @wanderview