1488384 - Bright white flashes on opening new tabs and page reload when using Dark Mode or Firefox Dark theme

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, defect, P3)

Description

[Khvoinitsky Mikhail [:m_khvoinitsky]]

Attachment: bright-flash.webm

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180808222917

Steps to reproduce:

1. Enable Firefox' Dark theme.
2. Open any website with native dark theme or install any add-on that makes web dark and open any website


Actual results:

Bright flash will appear between dark home page and dark website


Expected results:

Bright flash should not appear between dark home page and dark website

Comment 1

[Khvoinitsky Mikhail [:m_khvoinitsky]]

Attachment: dark-theme-fix.patch

Here is a patch. However, I'm not quite sure whether var(--chrome-background-color) is the best choice for that or not. Please, take a look.

Comment 2

[Khvoinitsky Mikhail [:m_khvoinitsky]]

Attachment: bright-flash-fixed.webm

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 9006208 [details] [diff] [review]
dark-theme-fix.patch

This results in the opposite problem on light websites (which is most websites), e.g. when opening a link in a new tab without going through about:newtab.

Comment 4

[Khvoinitsky Mikhail [:m_khvoinitsky]]

Yes, but now the same is happening in Private Browsing (due to bug 1379587 fix) — under some circumstances page reload of light website flashes dark purple. I guess that people who use Dark Firefox tend to use dark websites or add-ons for that. Also, dark blink on bright screen doesn't hurt eyes while bright flash on dark screen does.

Comment 5

[Dão Gottwald [:dao]]

(In reply to Khvoinitsky Mikhail [:m_khvoinitsky] from comment #4)
> Yes, but now the same is happening in Private Browsing (due to bug 1379587
> fix) — under some circumstances page reload of light website flashes dark
> purple.

The reload case sounds line an independent Gecko bug. E.g. when not using the dark theme and reloading a dark page, we'd like to keep the page background without showing white in between. In my experience this already works most of the time, but there might be edge cases where it doesn't.

> I guess that people who use Dark Firefox tend to use dark websites
> or add-ons for that.

That's an interesting guess but it doesn't seem to be backed by data.

> Also, dark blink on bright screen doesn't hurt eyes
> while bright flash on dark screen does.

It's still an annoying interruption though.

Comment 6

[Khvoinitsky Mikhail [:m_khvoinitsky]]

(In reply to Dão Gottwald [::dao] from comment #5)
> (In reply to Khvoinitsky Mikhail [:m_khvoinitsky] from comment #4)
> > Yes, but now the same is happening in Private Browsing (due to bug 1379587
> > fix) — under some circumstances page reload of light website flashes dark
> > purple.
> 
> The reload case sounds line an independent Gecko bug. E.g. when not using
> the dark theme and reloading a dark page, we'd like to keep the page
> background without showing white in between. In my experience this already
> works most of the time, but there might be edge cases where it doesn't.

Indeed, reload isn't a problem usually. It mostly loading a page in a new tab.

> > I guess that people who use Dark Firefox tend to use dark websites
> > or add-ons for that.
> That's an interesting guess but it doesn't seem to be backed by data.

Unfortunately, yes.

> > Also, dark blink on bright screen doesn't hurt eyes
> > while bright flash on dark screen does.
> 
> It's still an annoying interruption though.

But less severe.

I'm a developer of one of the add-ons that makes web dark. FYI, related bug: https://github.com/m-khvoinitsky/dark-background-light-text-extension/issues/131
Ideally, Firefox built-in dark theme should affect everything what is not available for add-ons.

As I already said, the same is already done now for Private Browsing, why that was not a problem?

Finally, do you have a better suggestion?

Comment 7

[Tim Nguyen :ntim]

(In reply to Khvoinitsky Mikhail [:m_khvoinitsky] from comment #6)
> Finally, do you have a better suggestion?

My suggestion would be to allow add-ons to customize the default content area background: see bug 1459504. 

I can mentor you through this bug if you're interested.

Comment 8

[Dão Gottwald [:dao]]

(In reply to Tim Nguyen :ntim from comment #7)
> (In reply to Khvoinitsky Mikhail [:m_khvoinitsky] from comment #6)
> > Finally, do you have a better suggestion?
> 
> My suggestion would be to allow add-ons to customize the default content
> area background: see bug 1459504. 
> 
> I can mentor you through this bug if you're interested.

That would just shift this patch's problem from being built in to extensions. Making this part of the theming API is basically a footgun. I morphed bug 1459504 to avoid that.

Comment 9

[milzbruch]

i just wanted to confirm, that I've seen the same behavior. the bug can be forced by rapidly opening new tabs with firefox home as default for new tabs and the dark theme active.

Comment 10

[Chris Peterson [:cpeterson]]

I think this bug deserves to be re-triaged to a higher priority than P5 now that Firefox's Default theme turns dark when macOS 10.14's Dark Mode is enabled (bug 1466335). The white flashes look really janky. macOS Dark Mode is not enabled by default, but it seems like a popular macOS feature.

STR:
1. Enable macOS 10.14's Dark Mode in System Preferences > General.
2. Launch Firefox in a new user profile.

RESULT:
The browser window will flash white for about half a second before the dark about:newtab page is loaded.

STR continued:
3. Cmd+R to reload the about:newtab page.

RESULT:
The browser window will flash white briefly before the dark about:newtab page is loaded.

STR continued:
4. Click on one of the links on the about:newtab page

RESULT:
The browser window will flash white briefly after the dark about:newtab page is unloaded and before the clicked link is loaded.

Comment 12

[Mehmet]

Hi, any chance to give this issue higher priority? Avoiding the bright flashing with enabled Dark Theme would be really great. BTW: The Private Window with the purple background isn't flashing - maybe the same solution can be used for the Dark Theme too?

Thanks for listening.

Comment 15

[Kestrel]

Attachment: Bug 1488384 - Style the background of #tabbrowser-tabpanels for dark in-content color scheme to avoid white flashes.

Comment 16

[Kestrel]

Now that Bug 1519548 has arrived we should style #tabbrowser-tabpanels to respect the in-content dark color scheme which will avoid the following white flashes:

• Opening links in new tabs and windows (long white flash).
• Opening Preferences, Addons, Troubleshooting Information, Task Manager etc.
• Restoring discarded tabs.
• Maximizing/resizing window (white flash on right/bottom sides of window).
• Closing sidebar (white flash on right side of window).
• privacy.resistFingerprinting.letterboxing (white frame around content).
• Opening and closing DevTools.
• Leaving Customize mode and returning to content tab.

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2d1d88a793a3
Style the background of #tabbrowser-tabpanels for dark in-content color scheme to avoid white flashes. r=dao

Comment 19

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/2d1d88a793a3

Comment 20

[Pranav bhattarai]

(In reply to Andreea Pavel [:apavel] from comment #19)

https://hg.mozilla.org/mozilla-central/rev/2d1d88a793a3

My firefox is up to date (i.e updated) and there are no changes in this situation what so ever, then why it has been marked as "Resolution: FIXED"?

Comment 21

[Jens Hausdorf :jens1o [ni? me]]

In which version branch are you? If you're using the Nightly(v68) version, you can expect to see this fixed by the next Nightly build (tomorrow).
Otherwise, it will take some more time(this is why it is set to status-firefox68 -> fixed). It is fixed in the version tree of 68.

Comment 22

[Mehmet]

Hi. I am using today's Nightly 68.0a1 (2019-04-17) (64-Bit) and the bright flashes are still appearing in Dark (Theme) Mode when I open a New Tab.

I am using macOS 10.14.4 on a MacBook Air NonRetina.

Comment 23

[Jens Hausdorf :jens1o [ni? me]]

Is browser.in-content.dark-mode set to true for you in about:config?

Comment 24

[Mehmet]

(In reply to Jens Hausdorf :jens1o [ni? me] from comment #23)

Is browser.in-content.dark-mode set to true for you in about:config?

I toggled it to true now, relaunched Nightly, but I see the same result: It is still flashing bright :(

Comment 25

[Mehmet]

Attachment: screencast.mov

+screencast

Comment 26

[Kestrel]

(In reply to Mehmet from comment #24)

I toggled it to true now, relaunched Nightly, but I see the same result: It is still flashing bright :(

You also need to be using a dark OS theme or have ui.systemUsesDarkTheme = 1. Note that there will still be white flashes when restoring unloaded about tabs (Bug 1408122) and rapidly creating new tabs like in the video (Bug 1510567).

Comment 27

[Mehmet]

(In reply to Kestrel from comment #26)

(In reply to Mehmet from comment #24)

I toggled it to true now, relaunched Nightly, but I see the same result: It is still flashing bright :(

You also need to be using a dark OS theme or have ui.systemUsesDarkTheme = 1. Note that there will still be white flashes when restoring unloaded about tabs (Bug 1408122) and rapidly creating new tabs like in the video (Bug 1510567).

Ah, okay. Thanks, that is working for me now when I also switch in addition to System Dark Mode. (And thanks, for the report numbers regarding the open issues.)

Question: Will the bright flashes also be fixed for System Light Mode when using the Dark Theme? It is at least mentioned in the title of this bug report "...or Firefox Dark theme". Is there a another bug number for it? Thanks in advance.

Comment 28

[amithm7]

(In reply to Kestrel from comment #26)

You also need to be using a dark OS theme or have ui.systemUsesDarkTheme = 1. Note that there will still be white flashes when restoring unloaded about tabs (Bug 1408122) and rapidly creating new tabs like in the video (Bug 1510567).

So this bug is not fixed, i have the same problem on linux, gtk theme being white.

What did your changes "Style the background of #tabbrowser-tabpanels for dark in-content color scheme to avoid white flashes"
do? Even if it did something, isn't this a partial fix?

Comment 29

[Kestrel]

Create ui.systemUsesDarkTheme = 1 in about:config and it works with light OS theme.

This bug fixes the majority of commonly encountered white flashes, the other two bugs are relative edge cases. The approach used is the same as in the original patch submitted by the bug creator in Comment 1.

Comment 30

[Mehmet]

(In reply to Kestrel from comment #29)

Create ui.systemUsesDarkTheme = 1 in about:config and it works with light OS theme.

Yes, that works for me. Thanks.

Comment 31

[hueydai]

This is still happening for me: I am using Firefox darkmode + Dark Reader plugin to render all pages dark. Screen flashes white when I click on links, when I reload pages, and when I open tabs too quickly.

It's jarring enough that I have not fully switched from chrome to firefox.

Comment 32

[hueydai]

Forgot to mention that I am trying this in Fedora 30 using OS adwaita-dark dark theme.

Comment 33

[Dimitrios Apostolou]

(In reply to hueydai from comment #31)

This is still happening for me: I am using Firefox darkmode + Dark Reader plugin to render all pages dark. Screen flashes white when I click on links, when I reload pages, and when I open tabs too quickly.

It's jarring enough that I have not fully switched from chrome to firefox.

Are you using Firefox 68? Are you using the preferences tweaks mentioned above?

Comment 34

[Pranav bhattarai]

same here bro.

Until and unless this is not fully resolved, I am using Chrome. Waiting for Firefox update which might have resolved this issue. I don't want to use beta.

Comment 35

[julius.jarvenkimmel]

I updated to Firefox 68, and unfortunately, this bug seems to persist. I still get the white flashes while opening new tabs or reloading pages. I tried resetting my Firefox settings and doing a clean install of Firefox. These actions did not help.

Comment 36

[Pranav bhattarai]

(In reply to Andreea Pavel [:apavel] from comment #19)

https://hg.mozilla.org/mozilla-central/rev/2d1d88a793a3

This is clearly not resolved, because:

1. The new tab is still white even after selecting the default dark theme.
2. Pages waiting to be load is still white.

I have installed the beta. Version is: 68.0b14 (64-bit)

The only way to resolve this is to install Chrome.

Comment 37

[Kestrel]

This isn't enabled in Firefox 68 and requires changing extra settings as described in Comment 23 and Comment 29.

The white flashes that are resolved by this bug are described in Comment 16, other white flashes are different bugs that have been mentioned in Comment 26.

Comment 38

[f.v.claus]

Attachment: mozilla_whiteflash.webm

I am still seeing a white background for new tabs. I am using 75.0 on Ubuntu and I configured both properties that are mentioned in the comments. For the recording, I ran in private mode, not sure if this is normally done here. Usually I use the DarkReader addon. This does not happen when I open a new tab with Ctrl-T, only when I click on links that open in a new tab. Should this be a different bug ticket, then? I am also not sure if this is happens on all pages.

Comment 39

[Niklas Hambüchen]

Important (and confusing) seems to be that ui.systemUsesDarkTheme = True (Boolean) does not work, only ui.systemUsesDarkTheme = 1 works (and it switches the about:config page itself to dark immediately).

Maybe that's your issue, f.v.claus? Also some other pages incorrectly recommend ui.systemUsesDarkTheme = True.

Why is it this way, btw? Would a Boolean not make sense here?

Comment 40

[[e-mail]]

I agree this:

(In reply to Niklas Hambüchen from comment #39)

Important (and confusing) seems to be that ui.systemUsesDarkTheme = True (Boolean) does not work, only ui.systemUsesDarkTheme = 1 works

maybe confusing I was puzzled too.