Page MenuHomePhabricator

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

Description

NOTE: If you are still experiencing this issue, you have a linked image in a template inside a table. To fix convert this to use a frameless image or add the noresize class to the image element.

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.

  1. Image sizes in the following examples should be the same in Vector as Vector 2022:
  2. https://en.wikipedia.org/wiki/Wikipedia:2009_Top_50_Report
  3. https://en.wikipedia.org/wiki/List_of_public_art_in_the_London_Borough_of_Ealing#Ealing
  4. https://en.wikipedia.beta.wmflabs.org/wiki/T367463
  5. https://eu.wikipedia.org/wiki/Azala with Vector 2022 enabled
  6. https://meta.wikimedia.org/wiki/AvoinGLAM
  1. Run the QA steps in T338110 on mobile

Design

N/A

Acceptance criteria

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):

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

image.png (106×355 px, 3 KB)

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

image.png (143×308 px, 24 KB)

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

QA Results - Beta/PROD

ACStatusDetails
1T367463#9907925

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
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.Jun 14 2024, 5:55 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

@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

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.

case 1.png (797×453 px, 54 KB)

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.
case 2.png (751×553 px, 88 KB)

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)

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.

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

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.

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.

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

Change #1043882 merged by jenkins-bot:

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

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

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

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

StatusDesktopMobile
2024-06-18_08-16-00.mp4.gif (1×1 px, 2 MB)
2024-06-18_08-16-26.mp4.gif (1×1 px, 3 MB)
Overlaps Appearance
2024-06-18_08-45-41.mp4.gif (1×1 px, 3 MB)
2024-06-18_08-46-20 (2).gif (523×603 px, 3 MB)
2024-06-18_09-44-25.png (932×1 px, 476 KB)
Image splits text?
2024-06-18_09-43-41.png (955×1 px, 1 MB)
Mobile missing Donald Trump
2024-06-18_09-43-00.png (967×1 px, 424 KB)
Image splits text?
2024-06-18_09-46-33.png (956×1 px, 1 MB)
Different wording when comparing mobile vs desktop
2024-06-18_09-49-11.png (945×1 px, 245 KB)
2024-06-18_09-49-25.png (958×1 px, 167 KB)
2024-06-18_09-53-03.mp4.gif (796×872 px, 2 MB)
2024-06-18_09-57-38 (1).gif (447×531 px, 2 MB)

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

  1. 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).
  2. Only images are in scope - ignore tables overlapping sidebar.
  3. 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)]]

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)

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.

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

StatusDesktop
2024-06-18_08-16-00.mp4.gif (1×1 px, 2 MB)
White boxes
2024-06-19_13-58-08.png (823×1 px, 247 KB)
2 small images with the tiger jumps back and forth to big image and small when making the screen smaller
2024-06-19_13-52-58.mp4.gif (720×928 px, 3 MB)
Trump info box is still white
2024-06-19_13-55-07.png (683×1 px, 381 KB)
Images layout is off when decreasing screen size?
2024-06-19_14-03-28 (1).gif (327×511 px, 3 MB)
2024-06-18_09-53-03.mp4.gif (796×872 px, 2 MB)

@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:

  • Two weeks ago there was a problem with the displayed size of some images that are used within tables. This was fixed last week.

Ah, right, then I believe this is essentially covered by the mention in last week's Tech News. Thanks.

Jdlrobson claimed this task.