Closed Bug 1538414 Opened 5 years ago Closed 6 months ago

White flashes when navigating to a different page hurts my eyes/head

Categories

(Core :: Layout, defect, P3)

Product:
Core
Component:
Layout
Version:
66 Branch
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1699768
Project Flags:
Accessibility Severity s3

People

(Reporter: ragnarolsen96, Unassigned)

References

Details

(Keywords: access)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

When you navigate to another webpage, the browser briefly flashes white, especially if you don't have fast internet access. It really hurts my eyes/head and there should be an option to change to a darker color when it changes webpage. Thanks.

Actual results:

White flashes and a headache after a long workday

Expected results:

Not flash white

Component: Untriaged → Layout
Keywords: access, dupeme
Product: Firefox → Core
Summary: White flashes hurts my eyes/head → White flashes when navigating to a different page hurts my eyes/head

Does changing browser.display.background_color in about:config do the trick?

Flags: needinfo?(ragnarolsen96)
Priority: -- → P3
Has STR: --- → yes

This happens with the dark theme enabled as of v67, and on v69 nightly as well. Consider changing it to a dark color like grey or black when the dark theme is selected.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

Does changing browser.display.background_color in about:config do the trick?

Hi there!

I have been struck with the same issue. I am using the official Dark theme and Dark reader extension.

And no, Setting browser.display.background_color to #000000 does not fixes this issue. It really only changes the background in "New Tab" or "settings" pages.

shorlander, what color should about:blank be in dark mode?

Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(shorlander)

(In reply to Jonathan Watt [:jwatt] from comment #4)

shorlander, what color should about:blank be in dark mode?

Hi, I am not OP but I do have this issue.

I have official dark theme enabled with Dark reader extension. In my setup, about:config is white. If it is what rendered after entering an URL and pressing enter but before the actual content is rendered, Then it should be black or "dark" to address this issue.

I am sorry, I meant about:blank and not about:config.

(In reply to Jonathan Watt [:jwatt] from comment #4)

shorlander, what color should about:blank be in dark mode?

It should be same color as the one use for the other about:* pages. Here's the hex value #2a2a2e.

(In reply to Ishan Jain from comment #3)

And no, Setting browser.display.background_color to #000000 does not fixes this issue. It really only changes the background in "New Tab" or "settings" pages.

Setting that pref makes my default tab background be black (see for example about:blank or data:text/html,foo).

So maybe what's going on is that we paint the website's background too early, but we still don't have the content around?

(In reply to Danny Colin [:sdk] from comment #7)

(In reply to Jonathan Watt [:jwatt] from comment #4)

shorlander, what color should about:blank be in dark mode?

It should be same color as the one use for the other about:* pages. Here's the hex value #2a2a2e.

Yes, this :) ^^ Thank you.

Flags: needinfo?(shorlander)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #8)

(In reply to Ishan Jain from comment #3)

And no, Setting browser.display.background_color to #000000 does not fixes this issue. It really only changes the background in "New Tab" or "settings" pages.

Setting that pref makes my default tab background be black (see for example about:blank or data:text/html,foo).

So maybe what's going on is that we paint the website's background too early, but we still don't have the content around?

Yes, I would agree. Changing that setting does indeed change the background for about:newtab (but not about:preferences or about:config!)... eventually. The problem is that before the background color is rendered, there is always a brief flash of pure white. It certainly is enough to hurt your eyes if you have been using your laptop with a dark theme in low ambient light.

The same thing happens when loading a website in a new tab, or reopening a closed tab. Until the content is loaded, the tab is white - despite having set browser.display.background color to #000000.

This happens on FF79 on linux. It's mostly noticeable when a page loads and I'm not looking at the screen directly, but more to the side. This is not a huge deal but I think it shouldn't flash like that, should default to a dark color. (that doesn't mean breaking sites that expect the default background color to be white).

To me the flash could be either black or white, based on the default system GTK theme.

I tried the solution that was shared in this Reddit post which was setting nglayout.initialpaint.delay to 500, and it fixed the issue for me.

Apparently this is not a great solution cuz it delays the paint...

Can someone please look into this? This is a really annoying bug and has been open for quite some time now.

None of the suggested fixes have really fixed the problem.

Do you have a page which you navigate towards, and this happens?

I suspect what goes on is that if the page is loading but doesn't specify its background color early enough, so we try to render the incomplete page and that ends up causing the white flash, because otherwise this should've been fixed by bug 1408122.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #16)

Do you have a page which you navigate towards, and this happens?

I suspect what goes on is that if the page is loading but doesn't specify its background color early enough, so we try to render the incomplete page and that ends up causing the white flash, because otherwise this should've been fixed by bug 1408122.

Here is a video of me opening Github.com where I use the dark theme and I still get a bright/light flash. https://www.youtube.com/watch?v=CL_I2thzfFM

I have set, browser.in-content.dark-mode to true in about:config and I am using 86.0.1 on Arch linux/X11

See Also: → 1699768

(In reply to Ishan Jain from comment #17)
I couldn't reproduce this on nightly, but I could repro bug 1699768 and from the screenshot I think it might be the same issue. I'd check if any extension you might have may be causing this? If the extension reads layout information too early we'd unsuppress painting.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #19)

(In reply to Ishan Jain from comment #17)
I couldn't reproduce this on nightly, but I could repro bug 1699768 and from the screenshot I think it might be the same issue. I'd check if any extension you might have may be causing this? If the extension reads layout information too early we'd unsuppress painting.

I have just tested this in a fresh profile in firefox 86.0.1, I still have the white flash for a brief moment so I don't believe that a extension is the issue here.

And Yeah, I also believe bug 1699768 and this bug might be the same.

Clearing the needinfo since it looks like this question was answered in Comment 3

Flags: needinfo?(ragnarolsen96)
Severity: normal → S3

Setting up an access-s3 severity, because flashing is disruptive and possibly hurtful pattern, yet the flashing happens only once and is settled usually within 5 sec period (conforming to the WCAG 2.2 success criteria on flashing and blinking).

I tried to reproduce the issue on macOS 14 Sonoma with today's Firefox Nightly 121.0a1 and it appears that the interim page is shown in accordance with my theme: it is dark with the Dark theme and white with Light theme. Since the bug 1699768 that was mentioned above was fixed after this bug was investigated, it appears that this bug was also resolved.

@Ishan, @Daniel, do you think we could close it?

Accessibility Severity: --- → s3
Flags: needinfo?(dholbert)
Flags: needinfo?(bugzilla)

Yeah, it sounds like this is a duplicate of bug 1699768, based on comment 20 and based on the commit message on the patch that landed over there ("Don't unsuppress painting until we've known the website background, to prevent flashing.")

I tried to reproduce this issue here with a throttled network connection (and "disable cache") in Firefox devtools, navigating between https://bugzilla.mozilla.org/ and https://github.com.

The only white-page-backgrounds that I saw were from GitHub itself, underneath actual unstyled GitHub text content, early in the incremental-pageload process. That's somehwat unavoidable, given how GitHub structures/loads its CSS; the initial paint that I get there was from before any CSS resources at all had loaded. To really avoid this, GitHub would probably need some sort of inline <style> tag to set the background-color based on the preferred color scheme (which they could then further override/finesse as more of their resources load).

Status: NEW → RESOLVED
Closed: 6 months ago
Duplicate of bug: 1699768
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
See Also: → 1861750

(When testing this, I did notice that interrupting a pageload can result in a fully white page; I spun off bug 1861750 for that.)

I believe it's okay to close this now.

After the ping, I checked it once again on a few different websites(in my daily profile with the usual extensions and a completely fresh profile).

So far, fastmail.com(after logging in so you drop right in the mailbox ui, with dark theme enabled in the fastmail UI and firefox) is the only website where I still see the white flicker. In my daily profile, I see it for a little bit longer than a fresh profile. Maybe this is a issue with fastmail since I do not see this any more on other sites which support dark mode. I'll create a ticket with them about this.

Flags: needinfo?(bugzilla)
You need to log in before you can comment on or make changes to this bug.