Page MenuHomePhabricator

Images should be responsive in Vector and restrained to a max-size.
Closed, ResolvedPublic5 Estimated Story Points

Description

Background

All images wider than #content overflow. This is a solved problem on Timeless, Monobook and Minerva and it is time we applied a global solution for all skins. In some articles, in Vector 2022 the images overlap the side bar, and communities insist that this should be considered a blocker for rolling out Vector 2022 as the default.

For example:
https://en.wikipedia.beta.wmflabs.org/wiki/T113101

This adapts in Minerva and is generally not an issue with legacy Vector which does not have a sidebar on the right, but in Vector 2022 it overlaps the content area.

Screenshot 2024-05-31 at 7.36.06 AM.png (1×2 px, 2 MB)

User story

As a reader I want article images to fit within the available viewport space at all times for all skins.

Acceptance criteria

  • Limit floating rules in mediawiki.skinning to`@media screen and ( min-width: @width-breakpoint-tablet ) {`
  • Move the thumbnail styles that make images full screen on mobile from from Minerva to mediawiki.skinning so they apply to Vector 2022 and Minerva skin.
  • Replace the #content selector with body.skin--responsive .mw-parser-output
  • Once the above is merged add skin--responsive to the BODY element on Vector 2022 (this is our rollback strategy in case of an issue)
  • Post a patch to Minerva that removes reference to the noresize class added in T330527 and the styles you have upstreamed to core as part of this task.

QA in beta

QA

Requirement

Ensure images are responsive and restrained to a max-size in the Vector skin, avoiding overflow issues and enhancing compatibility across different skins. Test this functionality in both beta and production environments.

BDD

gherkin
Feature: Responsive Images in Vector

  Scenario: Ensure images are responsive and fit within the available viewport
    Given the user is viewing a page in the Vector skin
    When an image is displayed
    Then the image should be responsive and restrained to a max-size
    And the image should not overflow or overlap other content

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. AC1: Confirm that images resize appropriately as the window shrinks.
  5. AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

Production Links:

Notes

Videos are already OK:

Roll back plan

This change will be rolled out with style improvements for tables, infoboxes, hatnotes and images that improve how they display for mobile screens.

In case of unforeseen issues with tables/images, that severely damage the readability of the wiki per our criteria for rolling back the train we can revert the following patch safely at any given time to prompt more conversation/iteration:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1038894

QA Results - Beta

ACStatusDetails
1T113101#9889579

QA Results - PROD

ACStatusDetails
1T113101#9894373
2T113101#9894373
3T113101#9894373

Related Objects

Event Timeline

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

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

[mediawiki/skins/MonoBook@master] Responsive style for images was upstreamed to core

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

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

[mediawiki/skins/Timeless@master] Responsive style for images was upstreamed to core

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

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

[mediawiki/skins/MinervaNeue@master] Responsive style for images was upstreamed to core

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

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

[mediawiki/skins/Vector@master] Increase bundle size limit to support responsive behaviours

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

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

[mediawiki/skins/MinervaNeue@master] WIP: Clean up Minerva image styles

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

Change #1035595 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Vector 2010] Increase bundle size limit for responsive behaviours

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

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

[mediawiki/skins/Vector@master] Make Vector 2022 pseudo-responsive

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

Jdlrobson updated Other Assignee, added: bwang.
Jdlrobson added a subscriber: bwang.

Options for this one:

  • merge with understanding that the bug will be fixed
  • wrap it in calc and merge to workaround the bug
  • wait for the bug to be fixed

Change #1034607 merged by jenkins-bot:

[mediawiki/core@master] Skin: Responsive images is a core feature for responsive skins

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

Change #1038894 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make Vector 2022 pseudo-responsive

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

Edtadros subscribed.

Test Result - Beta

Status: ❌ FAIL
Environment: Beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. AC1: Confirm that images resize appropriately as the window shrinks.
  5. AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

#Page LinkScreenshot
❌ 1Adam?useskin=vectorThe image gets squished on the horizontal access instead of retaining the correct aspect ratio.
screenshot 127.mov.gif (758×1 px, 3 MB)
✅ 2Adam?useskin=vector-2022
screenshot129.mov-ezgif.com-optimize.gif (758×1 px, 2 MB)
❓ 3T310286There is no image.
screenshot 718.png (759×1 px, 108 KB)

Production Links:

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

[mediawiki/core@master] Don't squish images in non-responsive skin

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

Change #1041318 merged by jenkins-bot:

[mediawiki/core@master] Don't squish images in non-responsive skins e.g. Vector 2010

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

I think the no resize behaviour might be broken now, due to lack of specificity compared to the other statements?

And the width calculation doesn't account for the border yet, so it's 2px too big

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

[mediawiki/core@wmf/1.43.0-wmf.9] Don't squish images in non-responsive skins e.g. Vector 2010

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

Edward could you please repeat the QA? Thanks in advance!

Change #1041674 merged by jenkins-bot:

[mediawiki/core@wmf/1.43.0-wmf.9] Don't squish images in non-responsive skins e.g. Vector 2010

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

Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:39:43Z] <cjming@deploy1002> Started scap: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:42:21Z] <cjming@deploy1002> cjming, jdlrobson: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:52:35Z] <cjming@deploy1002> Finished scap: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]] (duration: 12m 52s)

@Jdlrobson Can you please review AC1 and AC3?
UPDATE: As mentioned in the Task sync meeting, AC1 and AC3 are working as designed

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. AC1: Confirm that images resize appropriately as the window shrinks.
  5. AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

#Page LinkScreenshot
✅1Adam?useskin=vectorThe image overlaps the menu list.
✅ 2Adam?useskin=vector-2022
screenshot129.mov-ezgif.com-optimize.gif (758×1 px, 2 MB)
✅ 3T310286The menu list and appearance disappears. AC1 and AC3 seem to act differently. Which is the correct way or is this as designed?.

Production Links:

Jdlrobson claimed this task.
Jdlrobson updated the task description. (Show Details)

@Jdlrobson @Edtadros Can you please review the NMI section and let me know how I should proceed, thanks!

Test Result - PROD

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

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. AC1: Confirm that images resize appropriately as the window shrinks.
  5. AC2: Confirm that images are constrained to the container and do not overlap other content.

Production Links:

❓ NMI- The image moves fine but the wording is overlapping as seen in the gif in #3. I'm not sure if you want this on this task as a fail or pass since the image moves fine. Please let me know how I should proceed, thanks!

UPDATE: Will be resolved in T113101#9894649
https://ru.wikipedia.org/wiki/%D0%A2%D1%83%D1%80%D1%86%D0%B8%D1%8F

2024-06-14_12-26-14.png (671×501 px, 142 KB)

❓ NMI- The image moves fine but t

You can ignore that. This is a known issue with legacy Vector and it's not intended to be used at this screen resolution, so not a problem we are likely to fix. You can treat this one as a pass! Thank you!

Hello @Jdlrobson, this change has caused the images in the navbox to not display (max-width: 100% !important;), for example, in the template "Đơn vị hành chính cấp tỉnh Việt Nam" on viwiki. Is there any way to fix this issue?

Current

image.png (1×2 px, 741 KB)

After disabled max-width: 100% !important;

image.png (1×2 px, 765 KB)

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

The issue was fixed yesterday, about 8 hours before you posted, but it seems that the anonymous cache of the CSS hasn't expired yet. If you load the url with ?debug=true, you should note it is fine.

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

The issue was fixed yesterday, about 8 hours before you posted, but it seems that the anonymous cache of the CSS hasn't expired yet. If you load the url with ?debug=true, you should note it is fine.

Thanks!