Page MenuHomePhabricator

Vector 2022: images overlapping with references using Firefox
Open, Needs TriagePublicBUG REPORT

Assigned To
None
Authored By
Patafisik_WMF
Apr 20 2023, 3:54 PM
Referenced Files
F37098922: Screenshot 2023-06-09 at 10.17.31.png
Jun 9 2023, 8:21 AM
F36957747: image.png
Apr 20 2023, 6:35 PM
F36957745: image.png
Apr 20 2023, 6:35 PM
F36957741: image.png
Apr 20 2023, 6:35 PM
F36957736: image.png
Apr 20 2023, 6:35 PM

Description

Steps to replicate the issue (include links if applicable):

  • Open enwiki and go to this article
  • in your preferences, disable the "Enable limited width mode" or select the full width at the right bottom of the page via the toggle
  • Look at the References section

What happens?:

  • Images overlap with references

What should have happened instead?:
References have to be responsive.

User says:

Can be fixed with:
.mw-parser-output .reflist { overflow: hidden; }

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
This is happening using Firefox, tested with other browser too but no problems using Chrome, Bing or Opera

Reported here on MediaWiki

Screenshot 2023-04-20 at 17-33-02 2K22 Tunguska - Wikipedia.png (1×2 px, 413 KB)

Event Timeline

I don't see the issue in Firefox when I have safemode turned off.

image.png (517×1 px, 203 KB)

I can reproduce with safemode on (I set some CSS on the infoboxes in console to make them float right in the absence of Common.css).

image.png (427×1 px, 186 KB)

The div that actually applies the column styles seems to respect the intruding floating content.

image.png (353×1 px, 136 KB)

But the ol contained inside it does not.

image.png (332×1 px, 121 KB)

It seems instead to be respecting .reflist's width, which contains both .mw-references-wrap div which contains the ol........

Eyeballing the list of gadgets I have turned on doesn't explain the discrepancy, nor does what's in Common/Vector/Vector-2022.css.

Firefox's multicolumn implementation doesn't like something about the width expansion button?

I can reproduce it when logged out too.

Logged out and playing with zoom, I can reproduce the overlap at 4 columns without safemode turned on, but not 3 or 5+ (i.e. both 3 and 5 take into account expected width). The above shots are clearly with 3.

Jdlrobson subscribed.

I can't replicate this in the latest Firefox. Is this still an issue? It seems most likely this was an issue with the article content.

I can.

Screenshot 2023-06-09 at 10.17.31.png (1×1 px, 678 KB)

This is just float collision. When floats 'collide' with other layout boxes, the layout algorithm looks at the dimensions of the top of the colliding boxes. The top of the reflist layout here fits nicely next to the very narrow rocket image. Then AFTER the rocket image, you have this much wider image, but because it's top is below the top of the reflist, it's 'too late' to make additional space for that box, so they overlap.

Don't put multiple float elements on a side in an order that increases in width. In articles like this with an ungodly amount of data in side boxes, it's probably better to put the images as horizontal inline galleries inside the main content.