Infinite motion when "Reduces motion" is enabled on mobile device for skins that are not responsive (Modern, Vector legacy)
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Description

Reported on https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1089411699#What_is_happening
Visual of issue: https://twitter.com/calichusetts274/status/1527442821199691776?s=21&t=Nutt1XXQkqIhz6f8UDcoEw

List of steps to reproduce (step by step, including full links if applicable):

Get an iOS device
Enable "reduced motion" on iOS device
Go to the history page of an article
Click "desktop view"

What happens?:

Witness the user interface dancing
Zooming has no effect
Vector 2022 is not impacted
Impacts Modern
Impacts CologneBlue
Probably impacts Monobook without

Suggested fix

My guess, is that because Vector is not designed to work at lower resolutions, there is a lot of unexpected layout reflow a mobile device. I suggest we limit the existing accessibility rule to only apply at desktop breakpoint

It's possible T306910 might fix this. If not, we likely need to make this module opt-in or only apply to skins that have set themselves as responsive.

Details

Subject	Repo	Branch	Lines +/-
Non-responsive skins should zoom out by default	mediawiki/core	master	+8 -0
mediawiki.skinning: Use preferred value unit `ms` for `transition`	mediawiki/core	master	+2 -2
mediawiki.skinning: `transition-duration` accessibility override set to `0`	mediawiki/core	wmf/1.39.0-wmf.12	+3 -5
mediawiki.skinning: `transition-duration` accessibility override set to `0`	mediawiki/core	master	+3 -5

Customize query in gerrit

Related Objects

Mentioned Here: T306910: Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))

Event Timeline

Jdlrobson created this task.May 22 2022, 3:34 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 22 2022, 3:34 PM

DMacks subscribed.May 22 2022, 4:00 PM

Jdlrobson triaged this task as High priority.May 22 2022, 4:03 PM

Jdlrobson added a project: Web-Team-Backlog (Kanbanana-FY-2021-22).

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

[mediawiki/core@master] Non-responsive skins should zoom out by default

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

gerritbot added a project: Patch-For-Review.May 22 2022, 4:07 PM

Nardog subscribed.May 22 2022, 4:18 PM

The issue appears to be transition-duration which was set to 0.01ms. Once set to 0 the issue disappears. cc @nray and @Volker_E .

https://gerrit.wikimedia.org/r/790448 also fixes this on page load along with another bug, however the transition-duration issue still kicks in when you click the sidebar on new Vector for example.

Xaosflux subscribed.May 22 2022, 7:41 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 23 2022, 5:18 PM

Jdlrobson updated the task description. (Show Details)May 23 2022, 5:42 PM

Jdlrobson updated the task description. (Show Details)

LGoto set the point value for this task to 3.May 23 2022, 5:44 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson assigned this task to Volker_E.May 23 2022, 5:44 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

[mediawiki/core@master] [Accessibility] transition-duration should be zero

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

Change 797418 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.skinning: `transition-duration` accessibility override set to `0`

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

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

[mediawiki/core@wmf/1.39.0-wmf.12] mediawiki.skinning: `transition-duration` accessibility override set to `0`

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

Guessing we should backport this one on Tuesday

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.13; 2022-05-23).May 23 2022, 11:00 PM

CptViraj subscribed.May 24 2022, 12:15 PM

Jdlrobson assigned this task to cjming.May 24 2022, 5:10 PM

Scheduled for backport in a few hours https://wikitech.wikimedia.org/wiki/Deployments#deploycal-item-20220524T2000

Change 797219 merged by jenkins-bot:

[mediawiki/core@wmf/1.39.0-wmf.12] mediawiki.skinning: `transition-duration` accessibility override set to `0`

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

Mentioned in SAL (#wikimedia-operations) [2022-05-24T21:23:35Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.12/resources/src/mediawiki.skinning/accessibility.less: Backport: [[gerrit:797219|mediawiki.skinning: transition-duration accessibility override set to 0 (T308979)]] (duration: 00m 51s)

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.12; 2022-05-16); removed MW-1.39-notes (1.39.0-wmf.13; 2022-05-23).May 24 2022, 10:00 PM

Jdlrobson reassigned this task from cjming to Edtadros.May 25 2022, 4:36 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson added a subscriber: cjming.

@Jdlrobson is this already in production? If so I did test it on enwiki but had to use query params to get Modern and Cologne Blue and saw no jitter. The steps indicate that it should happen when clicking on the Desktop link, but I do not know of a way to have it automatically default to those two skins. I would like to test it that way to be certain. Any hints on how?