Massive gaps in certain articles with limited width turned off
Closed, InvalidPublicBUG REPORT
Actions

Assigned To

None

Authored By

	evelyn
	Aug 31 2023, 9:29 AM

Project Tags

Referenced Files

	F37650399: image.png
	Sep 3 2023, 7:24 PM

	F37650365: Screenshot from 2023-09-03 20-28-57.png
	Sep 3 2023, 6:34 PM

	F37650181: image.png
	Sep 3 2023, 11:20 AM

	F37650178: image.png
	Sep 3 2023, 11:20 AM

	F37644415: image.png
	Aug 31 2023, 9:29 AM

	F37644413: image.png
	Aug 31 2023, 9:29 AM

	F37644411: image.png
	Aug 31 2023, 9:29 AM

	F37644409: image.png
	Aug 31 2023, 9:29 AM

Subscribers

Aklapper

evelyn

TheDJ

Description

I don't really know the best way to phrase this bug report, but on certain articles on Wikipedia, there are massive padding and spacing issues that are occuring when using the new design of the Vector skin when limited-width mode is disabled (I honestly hate that mode as i prefer websites taking full advantage of the real estate they are given). I am not sure as to what is exactly causing this issue, but it is quite frustrating and annoying to see this happening, not to mention severely jarring visually. I will attach screenshots, but my browser is set at a size higher than 1440p, as I use a 4K display panel so it might be difficult to reproduce, but these images reflect the issues as of Edge 118 Canary (118.0.2071.0), and they showcase the various gap, padding, and spacing issues that I have noticed. Its impossible to go to every Wikipedia article to figure out all the different spacing issues, but these are the ones I've noticed. And this more than likely isn't an issue exclusive to Wikipedia but rather any wiki platform that has migrated to Vector 2022. Not sure when this issue began happening, but I believe it was recently.

Edit: Reopened due to invalid conclusion of the bug's nature. It is not a local wiki issue, I have done comparisons between Vector 2010 and Vector 2022 and only Vector 2022 is suffering from the layout / spacing bugs I have shown in this bug report.

Event Timeline

evelyn created this task.Aug 31 2023, 9:29 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 31 2023, 9:30 AM

I did some additional testing, these visual issues are also present in Chrome Canary 118.0.5981.0 and Firefox 117 as well.

evelyn updated the task description. (Show Details)Aug 31 2023, 9:36 AM

• Mabualruz added a project: Web-Team-Backlog-Archived.Sep 1 2023, 3:33 PM

Hi @evelyn, thanks for taking the time to report this and welcome to Wikimedia Phabricator! For future reference, please use the bug report form (linked from the top of the task creation page) to create a bug report, and fill in the sections in the template, instead of deleting them. Thanks!

On https://en.wikipedia.org/wiki/Torus?useskin=vector-2022#Geometry this happens due to using {{Clear}} in the wiki text.
On https://en.wikipedia.org/wiki/Canada?useskin=vector-2022#Indigenous_peoples this happens due to using {{-}} in the wiki text.
https://en.wikipedia.org/wiki/England?useskin=vector-2022#Subdivisions should have been fixed by some content edits: https://en.wikipedia.org/w/index.php?title=England&action=history
On https://en.wikipedia.org/wiki/Vancouver?useskin=vector-2022 this happens due to using {{Clear}} {{Vancouver weatherbox}} in the wiki text.

This needs fixing on the local wiki by editing its local content. You may want to bring this up on https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical) . Thus I am closing this task here - thanks for your understanding.

(Also, I'd expect the same issues if you used other skins, for example https://en.wikipedia.org/wiki/Torus?useskin=vector#Geometry for the old Vector)

The screenshots have an indication that my narrow and wide gadget is being used. That’s not really vector 2022 compatible.

In T345326#9138129, @TheDJ wrote:

The screenshots have an indication that my narrow and wide gadget is being used. That’s not really vector 2022 compatible.

No. It's disabled. I have very few gadgets actually enabled.

@Aklapper Hi, I have done some further testing, it is not a local wiki problem but rather a literal style issue with Vector 2022. Even on articles with no {{Clear}} templates, image placement tends to go all over the place or be in the completely wrong place. An example is the London, Ontario article in the Geography section. The winter morning image is in the completely wrong place in Vector 2022. Vector (2010) does not exhibit these issues when using the ?useskin parameter. I do not know what specifically is causing this issue, but it most definitely is NOT an issue with Wikipedia but rather how Vector 2022 is handling things. Because Vector (2010) does not suffer from these problems. I would not have filed this bug report in the first place if it affected any other skin that wasn't Vector 2022.

Screenshots are attached below of Vector 2022 vs Vector (2010).

I would hate to have to go back to Vector 2010 just because of bugs with the 2022 version.

evelyn renamed this task from [Vector 2022] Massive gaps in certain articles with limited width turned off (due to local <div style="clear:both"> templates) to [Vector 2022] Massive gaps in certain articles with limited width turned off.Sep 3 2023, 11:30 AM

evelyn reopened this task as Open.

evelyn removed a project: Local-Wiki-Template-And-Gadget-Issues.

evelyn updated the task description. (Show Details)

In T345326#9138692, @evelyn wrote:

An example is the London, Ontario article in the Geography section. The winter morning image is in the completely wrong place in Vector 2022. Vector (2010) does not exhibit these issues when using the ?useskin parameter.

Vector 2010 does expose the same behavior on https://en.wikipedia.org/wiki/London,_Ontario#Geography at a high-enough width (or small zoom level):

Screenshot from 2023-09-03 20-28-57.png (1,920×1,856 px, 920 KB)

Browsers have to render content in a certain way given browser window widths and alignment styles defined in the CSS or via on-wiki content.
HTML is not PDF, so sometimes things do look unfortunate, and that is unavoidable, and not newly introduced by Vector 2022 (but sometimes more exposed).

I'm reopening because this is still a valid issue. This requires a rework of both skins to better account for image placement. When an image is placed in a specific place (e.g. below a section header), Vector's layout code shouldn't fall apart, nor should it cause major layout issues like major issues involving major padding or spacing issues. This exposes a major flaw in the Vector skins themselves. Because even if it's taking size of the browser window into account or the zoom level, issues such as major padding issues where text doesn't attach to images should not happen. It is a major flaw with Vector, and it needs to be corrected. Because as it stands this is just hideous. And I've checked the other articles, the {{Clear}} template is not the source for this issue, because if it was, it still wouldn't cause major padding issues where images go all over the place, and they STILL happen even with all the templates removed. I know what i'm talking about here, this issue NEVER used to happen, at all. It only started happening a few weeks ago. So no, it is not an issue with browser rendering. It is an issue with Vector, both 2010 and 2022 then.

This is also a major layout issue. Footnotes not even being spaced properly? I feel like this issue is rooted at a deeper level in MediaWiki's skin engine or the way it handles wide layouts than just issues with the skins at this point. These layout bugs should not happen. I should not have to enable limited width mode in Vector 2022 just to get a consistent article layout, and I do not remember these layout issues ever happening before Vector 2022 was fully rolled out as the default skin.

My bug report is valid and the issue shouldn't just be deemed a "local wiki issue" because Wikipedia is Wikimedia's OFFICIAL wiki platform. This is an issue being exposed from Wikimedia developed skins and a Wikimedia developed wiki platform. This isn't some custom local wiki issue. These are issues happening on a major Wikimedia project, and it is not the Clear template's fault. There is some bug in the way the Vector skins handle text layouts when images are involved.

It is an issue with Vector, both 2010 and 2022 then.

It is not an issue with Vector. You can reproduce that with any skin and certain widths, e.g. same with https://en.wikipedia.org/wiki/London,_Ontario?useskin=monobook#Geography

It is how HTML and web browsers algorithms work to render content on pages. There is nothing to fix on the MediaWiki software side here, as MediaWiki software did not introduce this behavior (but different content widths might expose the already existing behavior more often). Thus I'm asking you to please leave this ticket closed. Thanks for your understanding!

Aklapper renamed this task from [Vector 2022] Massive gaps in certain articles with limited width turned off to Massive gaps in certain articles with limited width turned off.Sep 3 2023, 7:38 PM

Massive gaps in certain articles with limited width turned offClosed, InvalidPublicBUG REPORTActions

Description

Event Timeline

Massive gaps in certain articles with limited width turned off
Closed, InvalidPublicBUG REPORT
Actions