Tables with images inside them appear at minuscule size or disappear due to responsive image CSS
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Izno
	Thu, Jun 13, 8:16 PM

Description

NOTE: communities can workaround this by adding a rule to MediaWiki:Vector-2022.css. You can also wrap the table in a div element with noresize class to disable the behaviour and also improve the display of the table on mobile. We hope to have a proper fix in place by end of day ~~Monday~~ Tuesday.

Background

Our styles for responsive images are applying in places they don't need to apply and in some cases resulting in the image disappearing (usually inside table based or flex based layouts). This has been a longstanding issue on mobile where images are lazy loaded (details in T338110).

User story

As an editor I don't want my templates impacted by responsive image changes and to be trusted to handle that myself inside the template.

Requirements

Images inside tables should not be subject to modification
Opt out should be easier - height and image set by CSS should not be overridden e.g. template editors should not have to apply !important inside templates to override rules.

Derived Requirements

Ensure that the original and all subsequent images in a gallery on a Wikipedia page load correctly and are displayed without distortion in the mobile skin (Minerva).

BDD

Feature: Gallery Image Display on Mobile

Scenario: Ensure gallery images load correctly and are displayed without distortion

Given the user is viewing a Wikipedia page with a gallery in the Minerva skin
When the user scrolls through the gallery images
Then each image should load correctly and be displayed without distortion

Test Steps

NOTE: For QA engineer to review.

Open Wikipedia on the Minerva skin and navigate to a page with a gallery.
Scroll through the gallery images.

Image sizes in the following examples should be the same in Vector as Vector 2022:
https://en.wikipedia.org/wiki/Wikipedia:2009_Top_50_Report
https://en.wikipedia.org/wiki/List_of_public_art_in_the_London_Borough_of_Ealing#Ealing
https://en.wikipedia.beta.wmflabs.org/wiki/T367463
https://eu.wikipedia.org/wiki/Azala with Vector 2022 enabled
https://meta.wikimedia.org/wiki/AvoinGLAM

Run the QA steps in T338110 on mobile

Design

N/A

Acceptance criteria

All examples in https://en.wikipedia.beta.wmflabs.org/wiki/T367463#Images_that_should_not_alter_size_when_the_browser_window_is_resized must match their specified behaviour.

Communication criteria - does this need an announcement or discussion?

Yes. Run a User-notice so editors know where to flag any new issues.

Rollback plan

If necessary, we can do a full revert of responsive behaviour if after this fix, we still find issues with the existing implementation.

This task was created by Version 1.0.0 of the Web team task template using phabulous

Original bug report

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

Visit https://en.wikipedia.org/wiki/Template:Donald_Trump_series

What happens?:
There's a really small https://en.wikipedia.org/wiki/File:Donald_Trump_official_portrait_(3x4a).jpg on the left in the header

What should have happened instead?:
Should be wide enough to be visible :) From archive:

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Deliberately separate from T367462: Responsive Vector uses hatnote.less and infobox.less at all resolutions since I don't know what the best solution is here. Limiting the issue by screen width may be as valid as there, at least in the interim, but I know there was a desire for images to be available everywhere due to the "unresponsive wide things go out the right" issue.

Maybe worth a see also to T282588: images wrapped in flex item styling get really small in Timeless/Minerva.

Onwiki discussion: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Thursday_13_June_style_changes

On wiki fixes

For wikis encountering the same issue, you can apply these styles locally to address the issue. The benefit of this is that it will also fix display in mobile site.

Sign off steps

Undo https://en.wikipedia.org/wiki/MediaWiki:Vector-2022.css#L-29

QA Results - Beta/PROD

AC	Status	Details
1	✅	T367463#9907925

Details

	Subject	Repo	Branch	Lines +/-
	Improve responsive images and avoid for inline	mediawiki/core	wmf/1.43.0-wmf.9	+26 -32
	Improve responsive images and avoid for inline	mediawiki/core	master	+26 -32

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		None	T311254 On mobile header icons overlap with search bar in responsive mode
Open		None	T106463 [EPIC] Ready responsive Vector for wider deployment
Open		bwang	T361737 [EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools
Resolved		Jdlrobson	T113101 Images should be responsive in Vector and restrained to a max-size.
Resolved	BUG REPORT	Jdlrobson	T367463 Tables with images inside them appear at minuscule size or disappear due to responsive image CSS

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson claimed this task.Fri, Jun 14, 5:04 PM

Jdlrobson updated the task description. (Show Details)Fri, Jun 14, 5:08 PM

Jdlrobson mentioned this in T367484: Height of images inside divs are not respected due to a css !important rule in Vector 2022.

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T367484: Height of images inside divs are not respected due to a css !important rule in Vector 2022.

Jdlrobson added subscribers: Theklan, Snowmanonahoe, Sdrqaz and 6 others.

Jdlrobson renamed this task from Tables with images inside them appear at minuscule size due to responsive image roll out to Tables with images inside them appear at minuscule size or disappear due to responsive image CSS.Fri, Jun 14, 5:55 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T338110: Images in table disappear when scrolling down.

Jdlrobson edited projects, added MinervaNeue, Desktop Improvements (Vector 2022) (Tracking); removed Desktop Improvements (Vector 2022).

Jdlrobson edited projects, added Desktop Improvements (Vector 2022); removed Desktop Improvements (Vector 2022) (Tracking).

Jdlrobson updated the task description. (Show Details)

Jdlrobson added subscribers: Jidanni, SToyofuku-WMF, Jdrewniak.

@Jdlrobson i made some improvements to the page.

Added frameless, framed, unlinked and broken media, as well as noresize case.

Maybe we should keep frameless (aka not framed and not thumb) as the original for the short term, but if you want to tackle both at once, that's ok I guess.

Change #1043882 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/core@master] Improve responsive images and avoid for inline

https://gerrit.wikimedia.org/r/1043882

gerritbot added a project: Patch-For-Review.Fri, Jun 14, 7:53 PM

couldn't find a good way to deal with broken media, as the parser sets an inline style for that.. So i think we better leave it alone for now, it's already bugged in that case to begin with, so shouldn't be too much of an issue.

Glossary:
span[typeof~="mw:File"] a.mw-file-description img.mw-file-element: inline image
figure[typeof~="mw:File"] a.mw-file-description img.mw-file-element: block image, no frames, aka frameless
figure span.mw-file-description img.mw-file-element: unlinked block image, no frames
figure[typeof~="mw:File/Thumb"] a.mw-file-description img.mw-file-element: thumbnail
figure[typeof~="mw:File/Frame"] a.mw-file-description img.mw-file-element: Framed (will by default size to its original size, File: syntax sizing params do nothing here)
figure[typeof~="mw:Error mw:File/Thumb"] a.mw-file-description span.mw-file-element.mw-broken-media: broken media file

At Czech Wikipedia (cs.wikipedia.org) I noticed that the changes have affected many "transportation infoboxes", using also BS templates.
For example at https://cs.wikipedia.org/wiki/%C5%BDelezni%C4%8Dn%C3%AD_tra%C5%A5_Praha_%E2%80%93_%C4%8Cesk%C3%A1_T%C5%99ebov%C3%A1, the route is broken due to pictures being smaller than before and different sizes in the same infobox. Also there are white spaces between rows and it splits the route to specific pieces. Some of the pictures are not even showing.

The next example is at https://cs.wikipedia.org/wiki/1_(linka_metra_v_Pa%C5%99%C3%AD%C5%BEi) where all station pictures in infobox disappeared and the connection pictures on the right hand side are now placed even outside of the box.

In T367463#9894494, @Bilykralik16 wrote:

At Czech Wikipedia (cs.wikipedia.org) I noticed that the changes have affected many "transportation infoboxes", using also BS templates.

Yes this is know, and it is what this ticket is about. These are images in a table (infobox)

The next example is at https://cs.wikipedia.org/wiki/1_(linka_metra_v_Pa%C5%99%C3%AD%C5%BEi) where all station pictures in infobox disappeared and the connection pictures on the right hand side are now placed even outside of the box.

Same, but I do note that this infobox uses white-space: nowrap around all these icons, which means it is guaranteed to break for longer content on mobile (which HAS to wrap). The community should remove that.

Out of curiosity, why are all those images linked e.g. wrapped in A tags (in comparison to https://en.wikipedia.org/wiki/Template:Routemap) - is there an on-wiki reason?
(Please also see the NOTE at the top of the task for a temporary workaround)

In T367463#9894483, @TheDJ wrote:

figure span.mw-file-description img.mw-file-element: unlinked block image, no frames

Can this selector be tightened? I'd like some day to be able to use figure in wikitext and the descendant combinator after figure is predictably sad in such a world.

Dipsacus_fullonum subscribed.Sat, Jun 15, 2:02 PM

jhsoby subscribed.Sun, Jun 16, 9:19 AM

Strainu subscribed.Sun, Jun 16, 7:12 PM

iamrunner subscribed.Mon, Jun 17, 12:19 AM

In monobook and minerva skin, there is the same problem.

Shizhao added a project: User-notice.Mon, Jun 17, 7:18 AM

Adding a class="noresize" to the table seems to fix it as well? see https://en.wikipedia.beta.wmflabs.org/wiki/T367463#noresize

Jdlrobson moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 5:29 PM

bwang set the point value for this task to 3.Mon, Jun 17, 5:53 PM

bwang moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 6:05 PM

matej_suchanek updated the task description. (Show Details)Mon, Jun 17, 6:51 PM

In T367463#9894557, @Jdlrobson wrote:

Out of curiosity, why are all those images linked e.g. wrapped in A tags (in comparison to https://en.wikipedia.org/wiki/Template:Routemap) - is there an on-wiki reason?
(Please also see the NOTE at the top of the task for a temporary workaround)

That's the default behavior when embedding files. I think there has been no reason to have them or not to have them.

In T367463#9896886, @Shizhao wrote:

Adding a class="noresize" to the table seems to fix it as well? see https://en.wikipedia.beta.wmflabs.org/wiki/T367463#noresize

Yeh I noticed this too. Ill add to the description as a short term workaround.

Jdlrobson updated the task description. (Show Details)Mon, Jun 17, 6:58 PM

Jdlrobson mentioned this in T367831: Frameless images are not responsive.Mon, Jun 17, 10:50 PM

Change #1046790 had a related patch set uploaded (by Jdlrobson; author: TheDJ):

[mediawiki/core@wmf/1.43.0-wmf.9] Improve responsive images and avoid for inline

https://gerrit.wikimedia.org/r/1046790

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Mon, Jun 17, 11:32 PM

Change #1043882 merged by jenkins-bot:

[mediawiki/core@master] Improve responsive images and avoid for inline

https://gerrit.wikimedia.org/r/1043882

Jdlrobson reassigned this task from Jdlrobson to GMikesell-WMF.Mon, Jun 17, 11:48 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.10; 2024-06-18).Tue, Jun 18, 12:00 AM

In T367463#9894986, @Izno wrote:

Can this selector be tightened? I'd like some day to be able to use figure in wikitext and the descendant combinator after figure is predictably sad in such a world.

Ill take a look

GMikesell-WMF updated the task description. (Show Details)Tue, Jun 18, 3:05 PM

GMikesell-WMF updated the task description. (Show Details)

Monobook experiences the same problem.

@Jdlrobson Please review issues below and let me know if you have any question on any of them, thanks!

Test Result - Beta/PROD

Status: ❌ FAIL
Environment: Beta/PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Open Wikipedia on the Minerva skin and navigate to a page with a gallery.
Scroll through the gallery images.

1.Image sizes in the following examples should be the same in Vector as Vector 2022:
https://en.wikipedia.org/wiki/Wikipedia:2009_Top_50_Report
https://en.wikipedia.org/wiki/List_of_public_art_in_the_London_Borough_of_Ealing#Ealing
https://en.wikipedia.beta.wmflabs.org/wiki/T367463
https://eu.wikipedia.org/wiki/Azala with Vector 2022 enabled
https://meta.wikimedia.org/wiki/AvoinGLAM

2.Run the QA steps in T338110 on mobile

Status	Desktop	Mobile
✅
❌	Overlaps Appearance
❌	Image splits text?	Mobile missing Donald Trump Image splits text?
❌	Different wording when comparing mobile vs desktop
✅

GMikesell-WMF updated the task description. (Show Details)Tue, Jun 18, 5:03 PM

Thanks @GMikesell-WMF ! This is all looking good to me. Sorry I should have been clearer about a few things:

testing in mobile is out of scope for now. This is only aimed at desktop. All mobile issues are pre-existing and will continue to exist after this change (for now).
Only images are in scope - ignore tables overlapping sidebar.
This cannot be tested in production yet (but should be possible in 4 hrs)

@Jdlrobson OK so I will ignore the mobile issues, overlapping, and non-images for now. Are the different wording, and image split texts as designed for now and I'm just checking on the images? So for example, in possiblly 4 hours like my first gif for desktop, if it says image, there should be an actual image, correct?

Yeh the images are the main thing. They should adapt to the layout resize(unless we've said they shouldn't) .

I updated the test article to make it clearer how text should behave and to use unique images so it's clearer how it adapts.

Change #1046790 merged by jenkins-bot:

[mediawiki/core@wmf/1.43.0-wmf.9] Improve responsive images and avoid for inline

https://gerrit.wikimedia.org/r/1046790

Mentioned in SAL (#wikimedia-operations) [2024-06-18T21:03:07Z] <jdrewniak@deploy1002> Started scap: Backport for [[gerrit:1046790|Improve responsive images and avoid for inline (T367463)]], [[gerrit:1047155|Fix codex link styles overriding other link styles (T367844)]]

Stashbot mentioned this in T367844: Various buttons on Vector 2022 acquired unexpected link styling when hovered.Tue, Jun 18, 9:03 PM

Mentioned in SAL (#wikimedia-operations) [2024-06-18T21:07:47Z] <jdrewniak@deploy1002> jdrewniak, jdlrobson: Backport for [[gerrit:1046790|Improve responsive images and avoid for inline (T367463)]], [[gerrit:1047155|Fix codex link styles overriding other link styles (T367844)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-06-18T21:09:33Z] <jdrewniak@deploy1002> Started scap: Backport for [[gerrit:1046790|Improve responsive images and avoid for inline (T367463)]], [[gerrit:1047155|Fix codex link styles overriding other link styles (T367844)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-18T21:13:59Z] <jdrewniak@deploy1002> jdlrobson, jdrewniak: Backport for [[gerrit:1046790|Improve responsive images and avoid for inline (T367463)]], [[gerrit:1047155|Fix codex link styles overriding other link styles (T367844)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-06-18T21:26:07Z] <jdrewniak@deploy1002> Finished scap: Backport for [[gerrit:1046790|Improve responsive images and avoid for inline (T367463)]], [[gerrit:1047155|Fix codex link styles overriding other link styles (T367844)]] (duration: 16m 33s)

Maintenance_bot removed a project: Patch-For-Review.Tue, Jun 18, 9:31 PM

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.9; 2024-06-11); removed MW-1.43-notes (1.43.0-wmf.10; 2024-06-18).Tue, Jun 18, 10:00 PM

Screenshot 2024-06-19 at 10.16.20.png (1×1 px, 1 MB)

@Jdlrobson I noticed this behaviour btw. Images that are not aligned similar to the preceding image, do not clear the preceding content, and thus they size to the space that 'remains', as it can't reduce size equally between the images.

This shouldn't happen very often like this, because you need to spend all your horizontal width with two images with differing alignments and having a 700px image that isn't using the wide image template or something like that isn't that common. The smallest dimensions this can happen are least 550px or so of available space, so 300px on one side and more than 250px on the other side, which shouldn't be a very common layout. And If you have less available space that situation is likely to hit the forced clearing due to mobile.

Still something to keep an eye on, esp as there is a long term desire to up the thumbnail size to 300px, and that would result in hitting this situation a lot faster I think. It might be worth thinking about some new layout options for the future at some point.

@Jdlrobson Can you review the gifs and screenshots if these errors are what you are talking about or if these are different issues not about this task?

UPDATE: Due to be ing out of scope or working as designed as mentioned in T367463#9911209, these will now be passed

Test Result - Beta/PROD

Status: ✅ PASS
Environment: Beta/PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Open Wikipedia on the Minerva skin and navigate to a page with a gallery.
Scroll through the gallery images.

2.Run the QA steps in T338110 on mobile

Status	Desktop
✅
✅	White boxes
✅	2 small images with the tiger jumps back and forth to big image and small when making the screen smaller Trump info box is still white
✅	Images layout is off when decreasing screen size?
✅

GMikesell-WMF updated the task description. (Show Details)Wed, Jun 19, 9:11 PM

Jdlrobson moved this task from Incoming to Groomed on the Desktop Improvements (Vector 2022) board.Thu, Jun 20, 5:42 PM

@GMikesell-WMF these all look like they are working as expected or out of scope! Thanks!

For Tech News, please could someone confirm or describe what exactly needs to be communicated? I'm uncertain if it's essentially just informing everyone about a temporary bug that was fixed, or if there's any followup edits that might (or do) need to made by editors. If it's the former, I would hesitantly propose using this wording: