NOTE: communities can workaround this by adding [[ https://en.wikipedia.org/wiki/MediaWiki:Vector-2022.css#L-29 | 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.
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
== 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 [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | 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
{F55294175}
**What should have happened instead?**:
Should be wide enough to be visible :) From archive:
{F55294185}
**Software version** (on `Special:Version` page; skip for WMF-hosted wikis like Wikipedia):
**Other information** (browser name/version, screenshots, etc.):
Deliberately separate from {T367462} 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}.
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.
* Sidebar https://en.wikipedia.org/w/index.php?title=Module%3ASidebar%2Fstyles.css&diff=1228898189&oldid=1228886537
* Navboxes https://en.wikipedia.org/w/index.php?title=Module%3ANavbox%2Fstyles.css&diff=1228936124&oldid=1061467846
* tmbox https://en.wikipedia.org/w/index.php?title=Module%3AMessage_box%2Ftmbox.css&diff=1228936760&oldid=1097618699
* `.smallbox img` https://meta.wikimedia.org/w/index.php?title=Template%3AAvoinGLAM%2Fstyle.css&diff=26938566&oldid=26937631
== Sign off steps
[] Undo https://en.wikipedia.org/wiki/MediaWiki:Vector-2022.css#L-29