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

Overriding Firefox 24.0 black background in fullscreen mode #668

Closed
scottdavis99 opened this issue Oct 23, 2013 · 9 comments
Closed

Overriding Firefox 24.0 black background in fullscreen mode #668

scottdavis99 opened this issue Oct 23, 2013 · 9 comments

Comments

@scottdavis99
Copy link

I'm not sure if this is a bug or expected behavior in Firefox 24.0, but when you enter fullscreen mode by pressing the "f" key, the background color is set to black. (This makes black text on a black background invisible, although my images still appear.) I've replicated this on both Windows and OS X.

NOTE: this behavior DOESN'T manifest when I click the double-arrow key in the upper right corner on OS X -- only when I press the "f" key.

One workaround is to hardcode the bgcolor attribute on the body element:

<body bgcolor="white">

Another is to use the -moz-full-screen CSS selector with !important to override.

      body:-moz-full-screen {
        background-color: #fff !important;
      }
@hakimel
Copy link
Owner

hakimel commented Oct 27, 2013

Tried this on http://lab.hakim.se/reveal-js using FF 17, 23 & 27 running OS X 10.9 but wasn't able to reproduce. Still seeing the gradient background. Does this happen for you on all reveal.js presentations?

@hakimel hakimel closed this as completed Nov 27, 2013
@lkskrt
Copy link

lkskrt commented Sep 24, 2015

Hey, I just encountered this behaviour in Chrome 45.0.2454 on Windows and OS X 10.10.4. In This is also present on the reveal demo site:

revealbug

The fix suggested in this answer is working: http://stackoverflow.com/questions/16163089/background-element-goes-black-when-entering-fullscreen-with-html5#answer-24727000

@mplabs
Copy link

mplabs commented Sep 25, 2015

This seems to be a chrome bug. Adding html { background-color: inherit; } seems to help.

@lkskrt
Copy link

lkskrt commented Sep 25, 2015

That also works. Thanks, Felix!

@hendrikstill
Copy link

I have the same problem with Chrome 45.0.2454.99 (64-bit) on OSX 10.10.5
The fix from @mplabs works for me, too.

@ingben
Copy link

ingben commented Oct 3, 2015

👍 @mplabs. Just saved me quite some time. Works with Chrome Version 45.0.2454.101 (64-bit) on OS X 10.11.

@CodeAtMeBro
Copy link

@mplabs solution works for me, but also overides my background gradients that I've set on body{background:...} Does anyone have a suggestion on how to maintain these into fullscreen display?

hakimel added a commit that referenced this issue Oct 6, 2015
@hakimel
fix black background in fullscreen mode #668 #1386
5e763bc
@hakimel
Copy link
Owner

hakimel commented Oct 6, 2015

I tested and was seeing the same issue in Chrome OS X. Just pushed up a fix in 5e763bc

Can someone who was experiencing this issue in Firefox give it another try against the latest code and let me know if it works there too?

@huijing
Copy link

huijing commented Oct 17, 2015

I've tested the latest code and is confirmed working in firefox as well.

@jpletner jpletner mentioned this issue Oct 22, 2015
Closed
@emasch emasch mentioned this issue Jun 21, 2016
Closed
SteveDesmond-ca pushed a commit to SteveDesmond-ca/presentations that referenced this issue Apr 19, 2017
@hakimel
fix black background in fullscreen mode hakimel#668 hakimel#1386
cf18376
@snyk-bot snyk-bot mentioned this issue Dec 18, 2019
Open
@snyk-bot snyk-bot mentioned this issue Mar 27, 2020
Open
@snyk-bot snyk-bot mentioned this issue May 5, 2020
Open
@snyk-bot snyk-bot mentioned this issue Aug 27, 2020
Open
@snyk-bot snyk-bot mentioned this issue Sep 22, 2020
Open
@snyk-bot snyk-bot mentioned this issue Apr 1, 2021
Open
@snyk-bot snyk-bot mentioned this issue Sep 19, 2021
Open
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
8 participants
@scottdavis99 @hendrikstill @mplabs @hakimel @huijing @lkskrt @ingben @CodeAtMeBro