Page MenuHomePhabricator

Darkmode Background on longer pages is white
Open, Stalled, Needs TriagePublic


List of steps to reproduce (step by step, including full links if applicable):

What happens?:
When a media wiki page is longer that you can scroll, the background below the first height is white.

What should have happened instead?:
The background should be dark

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:
Used on our own MediaWiki: 1.35.3 - php: 7.3.28 - DarkMode: 0.1.0
But also visible on your demo MediaWiki.

Event Timeline

Restricted Application added subscribers: RhinosF1, Reception123, Aklapper. · View Herald Transcript

I can only see this on the far right hand side of the page. I assume it's because the table overflows. (On chrome for iOS)

Also for the record, Miraheze is not a demo. It's just an example usage of the extension. We're a wiki farm using the extension on production sites.

Sorry, didn't really notice that. Just wanted to point out on something public.

Tested on Windows10 With both Edge and Chrome (both latest)
Example screenshot:

DarkMode.PNG (734×1 px, 72 KB)

Aklapper changed the task status from Open to Stalled.EditedOct 7 2021, 9:44 AM

When a media wiki page is longer that you can scroll, the background below the first height is white.

No, not here on in Firefox 92. Cannot reproduce:

Screenshot from 2021-10-07 11-43-38.png (760×1 px, 154 KB)

But that's a different MediaWiki version than the one you mention. Where exactly to see a problem and for the same MW and extension version?

I can confirm that on the same wiki(s) (internal and miraheze) it is working in Firefox like it should.
But on both wiki(s) on the same machine, Chrome and Edge aren't displaying correctly.

The only difference i can see so quickly (didn't do full F12 inspection), that in Firefox the Left bar is DarkGrey-ish,
until the end of the current view (without scroll). And when you scroll the DarkGrey-ish will scroll up and Black seems to emerge (the part what is white in Chrome).

Firefox Mirahese:

Firefox-Miraheze.PNG (192×458 px, 6 KB)

I can reproduce with Chromium 94.0.4606.71. The white part in Chromium browsers seems to start at whatever vertical level the initial rendering stopped, which pretty much makes this a browser rendering/repaint bug to me. You may want to report this to instead?

This comment was removed by Aklapper.

I don't have permissions to edit and it's unclear to me where that background color comes from. Does this also happen when using safemode (see )? What is a clear list of steps to reproduce the problem, and which browser and browser version was tested?

This doesn't seem related.

It's a bug in Chromium. This started happening about a year ago. However I think the HTML of the Vector skin is also to blame. If you open your browser's inspector and hover over the <body> or <html> elements, you'll notice the highlighted areas stop abruptly at the bottom of the viewport. Since the styling is applied to <html>, it makes sense to me that Chromium isn't inverting things outside the visible <html> element. So it may be that Chromium is correct, and Firefox is wrong.

At this stage, since it's hard to say which browser has the right behaviour (I believe this has to do with CSS stacking context), I think the fix should be made to Vector. It's weird that <html> and <body> don't actually extend to the bottom of the document, anyway.

Tried to report here on Phabricator's Miraheze (T9344) few days earlier and the team said this was an upstream issue. The weird thing is that for me the bug seems to have happened since May or June 2022.

The MediaWiki right now on Miraheze is 1.37.2. They are going to move to 1.38 in few days but I doubt this will resolve the issue.

However for the browser this happens as well as on Google Chrome and on Firefox (102b7 here) (where I was testing). So seems this is not browser-dependant.

I wasn’t getting this issue on 1.35, But on 1.39. Main difference is installation. it's via git/git submodule and composer for all core/ext vendor on 1.35 and via tarball for core and extensions on 1.39. (Due to dorckerize mediawiki without using git) T323469

We are seeing this in ArchWiki.

My guess is that it's because Extension:DarkMode sets the background to black in only to invert the color later.

ArchWiki's workaround is to set a light color for html.client-darkmode in MediaWiki:Common.css:

There is an error in the bottom left corner of my wiki that has a white part when I am using the dark mode, when there are long pages, this error appears and when there are short pages, as is the case of my user page, this error does not appear

Captura.PNG (768×1 px, 79 KB)