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

Assigned To

None

Authored By

	GkDrNick
	Oct 7 2021, 9:12 AM

Description

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

visit1: https://meta.miraheze.org/wiki/Donate?usedarkmode=1
visit2: https://meta.miraheze.org/wiki/Special:Version?usedarkmode=1
Scroll down on Visit 2.

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.

Related Objects

Mentioned In: T323469: wgLogo is inverted in DarkMode on MW1.39
Mentioned Here: T323469: wgLogo is inverted in DarkMode on MW1.39

Event Timeline

GkDrNick created this task.Oct 7 2021, 9:12 AM

Restricted Application added a project: User-RhinosF1. · View Herald TranscriptOct 7 2021, 9:12 AM

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:

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

No, not here on https://meta.miraheze.org/wiki/Special:Version?usedarkmode=1 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:

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 https://bugs.chromium.org/p/chromium/issues/list instead?

Aklapper added a comment.Oct 7 2021, 12:35 PM

This comment was removed by Aklapper.

In T292697#7408370, @Aklapper wrote:

I don't have permissions to edit https://en.wikipedia.org/w/index.php?title=Template:Outdent&action=edit and it's unclear to me where that background color comes from. Does this also happen when using safemode (see https://www.mediawiki.org/wiki/Help:Locating_broken_scripts )? What is a clear list of steps to reproduce the problem, and which browser and browser version was tested?

This doesn't seem related.

Copy and paste error; sorry!

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.

Aklapper edited projects, added affects-Miraheze; removed User-RhinosF1.Aug 15 2022, 1:19 PM

R4356th mentioned this in T323469: wgLogo is inverted in DarkMode on MW1.39 .Dec 8 2022, 7:09 AM

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

TheresNoTime removed a subscriber: RhinosF1.Dec 15 2022, 11:35 PM

We are seeing this in ArchWiki.

My guess is that it's because Extension:DarkMode sets the background to black in https://github.com/wikimedia/mediawiki-extensions-DarkMode/blob/24afc1b8c3285d9b20b1f339fb80995792cb1c35/resources/ext.DarkMode.less#L43 only to invert the color later.

ArchWiki's workaround is to set a light color for html.client-darkmode in MediaWiki:Common.css: https://wiki.archlinux.org/index.php?diff=762564

Lahwaacz subscribed.Dec 30 2022, 6:12 PM

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

	F34677098: Screenshot from 2021-10-07 11-43-38.png
	Oct 7 2021, 9:44 AM

	F36555565: Captura.PNG
	Jan 30 2023, 7:54 AM

	F12: project.png
	Oct 7 2021, 12:23 PM

	F34677297: Firefox-Miraheze.PNG
	Oct 7 2021, 12:23 PM

	F34677090: DarkMode.PNG
	Oct 7 2021, 9:31 AM

Darkmode Background on longer pages is whiteOpen, Stalled, Needs TriagePublicActions

Description

Related Objects

Event Timeline

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