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

⚓ T306910 Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))
Page Menu
Phabricator
Create Task
Maniphest
T306910
Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))
Closed, Resolved
Public
3 Estimated Story Points
BUG REPORT
Actions
Edit Task
Edit Related Tasks...
Create Subtask
Edit Parent Tasks
Edit Subtasks
Merge Duplicates In
Close As Duplicate
Edit Related Objects...
Edit Commits
Edit Mocks
Mute Notifications
Protect as security issue
Assigned To
Jdlrobson
Authored By
Jdlrobson
Apr 26 2022, 2:40 PM
2022-04-26 14:40:40 (UTC+0)
Tags
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
(Ready for Signoff)
MediaWiki-Core-Skin-Architecture
(Backlog)
User-notice-archive
(Backlog)
Referenced Files
F35270278: 2FC6322A-FE2A-441A-AE2C-542F25D26F5E.jpeg
Jun 24 2022, 6:12 AM
2022-06-24 06:12:06 (UTC+0)
F35266019: image0.jpg
Jun 23 2022, 12:23 AM
2022-06-23 00:23:04 (UTC+0)
F35122275: Screenshot_20220509-152459_Chrome.jpg
May 9 2022, 10:33 PM
2022-05-09 22:33:54 (UTC+0)
F35122247: Screenshot_20220509-151012_Chrome.jpg
May 9 2022, 10:33 PM
2022-05-09 22:33:54 (UTC+0)
F35068634: Screenshot_20220426-072235_Chrome.jpg
Apr 26 2022, 2:40 PM
2022-04-26 14:40:40 (UTC+0)
F35068633: Screenshot_20220426-072156_Chrome.jpg
Apr 26 2022, 2:40 PM
2022-04-26 14:40:40 (UTC+0)
Subscribers
Aklapper
DogsRNice
Edtadros
GhostInTheMachine
Izno
Jdlrobson
Jdrewniak
View All 12 Subscribers
Description
Vector is not a responsive skin (does not set the viewport tag), so when viewed on mobile devices, the browser will adapt the content. It will not operate like a narrow screen and
our breakpoints will not apply.
Whatever the page loads like will be the minimum zoom level and it won't be possible to zoom out.
What happens?
Before change
After change
Note the line length for the article content is now shorter and crammed to the right.
What is proposed
Short term: Explicility zoom out on Vector 2022 when viewed on mobile device.
Long term: Make the skin responsive by adapting it to mobile display just like we do on Minerva.
The short term fix will likely reduce the amount of bug reports we get relating to user's expectations not being met by not making an explicit decision here e.g.
T309223
Details
Related Changes in Gerrit:
Subject
Repo
Branch
Lines +/-
Non-responsive skins should zoom out by default
mediawiki/core
master
+8
-0
Customize query in gerrit
Related Objects
Search...
Task Graph
Mentions
Status
Subtype
Assigned
Task
Resolved
BUG REPORT
Jdlrobson
T306910
Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))
Duplicate
BUG REPORT
None
T311195
Wikimedia Commons pages appear very, very small on mobile devices in desktop mode
Mentioned In
T395948: Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1"
T319305: Consider how Vector 2022 displays on mobile devices
T311119: All Wikimedia projects other than Wikipedia, Test Wikipedia, and Wikinews extremely zoomed out while using Vector Skin on iPad.
T308979: Infinite motion when "Reduces motion" is enabled on mobile device for skins that are not responsive (Modern, Vector legacy)
Blog Post: Should Vector be responsive?
Mentioned Here
T311795: [Bug] Safari doesn't allow font-size scaling on iPad for users viewing legacy and modern Vector
T311119: All Wikimedia projects other than Wikipedia, Test Wikipedia, and Wikinews extremely zoomed out while using Vector Skin on iPad.
T309223: #right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022
Event Timeline
Jdlrobson
created this task.
Apr 26 2022, 2:40 PM
2022-04-26 14:40:40 (UTC+0)
Restricted Application
added a subscriber:
Aklapper
View Herald Transcript
Apr 26 2022, 2:40 PM
2022-04-26 14:40:40 (UTC+0)
Jdlrobson
added projects:
Vector 2022
Web-Team-Backlog-Archived
Apr 26 2022, 2:40 PM
2022-04-26 14:40:59 (UTC+0)
Jdlrobson
added a subscriber:
ovasileva
Jdlrobson
updated the task description.
(Show Details)
Apr 26 2022, 2:49 PM
2022-04-26 14:49:15 (UTC+0)
ovasileva
triaged this task as
High
priority.
Apr 26 2022, 4:04 PM
2022-04-26 16:04:33 (UTC+0)
ovasileva
edited projects, added
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
; removed
Web-Team-Backlog-Archived
ovasileva
lowered the priority of this task from
High
to
Medium
Apr 26 2022, 5:31 PM
2022-04-26 17:31:39 (UTC+0)
LGoto
assigned this task to
Jdlrobson
Apr 26 2022, 5:34 PM
2022-04-26 17:34:55 (UTC+0)
PorkchopGMX
subscribed.
Apr 27 2022, 1:28 PM
2022-04-27 13:28:06 (UTC+0)
GhostInTheMachine
subscribed.
Apr 29 2022, 12:36 PM
2022-04-29 12:36:19 (UTC+0)
Jdlrobson
mentioned this in
Blog Post: Should Vector be responsive?
May 9 2022, 9:59 PM
2022-05-09 21:59:09 (UTC+0)
gerritbot
added a comment.
May 9 2022, 10:04 PM
2022-05-09 22:04:55 (UTC+0)
Comment Actions
Change 790448 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/core@master] POC: Non-responsive skins should zoom out by default
gerritbot
added a project:
Patch-For-Review
May 9 2022, 10:04 PM
2022-05-09 22:04:55 (UTC+0)
PatchDemoBot
added a comment.
May 9 2022, 10:06 PM
2022-05-09 22:06:58 (UTC+0)
Comment Actions
Test wiki
created
on
Patch demo
by Jdlrobson using patch(es) linked to this task:
Jdlrobson
removed
Jdlrobson
as the assignee of this task.
May 9 2022, 10:20 PM
2022-05-09 22:20:06 (UTC+0)
Jdlrobson
moved this task from
Needs Analysis
to
Upcoming
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jdlrobson
added a comment.
May 9 2022, 10:33 PM
2022-05-09 22:33:54 (UTC+0)
Comment Actions
The above change is really subtle, but you'll notice the zoom level is increased (logo and hamburger are smaller).
Before:
After:
I've written in more detail here:
Jdlrobson
mentioned this in
T308979: Infinite motion when "Reduces motion" is enabled on mobile device for skins that are not responsive (Modern, Vector legacy)
May 22 2022, 3:34 PM
2022-05-22 15:34:27 (UTC+0)
Jdlrobson
renamed this task from
Table of contents on mobile devices (not the same as narrow screens)
to
Explicility zoom out on Vector 2022 when viewed on mobile device (Was Table of contents on mobile devices (not the same as narrow screens))
May 27 2022, 4:32 PM
2022-05-27 16:32:22 (UTC+0)
Jdlrobson
updated the task description.
(Show Details)
Jdlrobson
renamed this task from
Explicility zoom out on Vector 2022 when viewed on mobile device (Was Table of contents on mobile devices (not the same as narrow screens))
to
Be explicit about Vector's responsive-support (Was Table of contents on mobile devices (not the same as narrow screens))
Jun 2 2022, 3:28 PM
2022-06-02 15:28:14 (UTC+0)
Jdlrobson
updated the task description.
(Show Details)
Restricted Application
added a subscriber:
Masumrezarock100
View Herald Transcript
Jun 2 2022, 3:28 PM
2022-06-02 15:28:15 (UTC+0)
LGoto
moved this task from
Incoming
to
Table of Contents
on the
Vector 2022
board.
Jun 6 2022, 5:40 PM
2022-06-06 17:40:04 (UTC+0)
LGoto
set the point value for this task to
Jun 6 2022, 5:52 PM
2022-06-06 17:52:39 (UTC+0)
LGoto
moved this task from
Upcoming
to
Ready for Development
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
LGoto
moved this task from
Ready for Development
to
Upcoming
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
ovasileva
moved this task from
Upcoming
to
Ready for Development
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jun 7 2022, 8:30 AM
2022-06-07 08:30:21 (UTC+0)
Jdlrobson
assigned this task to
Jdrewniak
Jun 14 2022, 5:10 PM
2022-06-14 17:10:18 (UTC+0)
Jdlrobson
moved this task from
Ready for Development
to
Code Review
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
gerritbot
added a comment.
Jun 15 2022, 4:20 PM
2022-06-15 16:20:20 (UTC+0)
Comment Actions
Change 790448
merged
by jenkins-bot:
[mediawiki/core@master] Non-responsive skins should zoom out by default
Jdlrobson
edited projects, added
User-notice
MediaWiki-Core-Skin-Architecture
; removed
Vector 2022
Jun 15 2022, 4:25 PM
2022-06-15 16:25:37 (UTC+0)
Comment Actions
Patch has been merged. I'm adding a
User-notice
in case users want to feedback problems with this when it rolls out on the train Thursday 23rd:
Something like:
"Users using non-responsive skins e.g. MonoBook or Vector(s) on mobile devices may notice a slight change in the default zoom level. This is intended to optimize zooming and ensure all interface elements are present on the page (for example the table of contents on Vector 2022). In the unlikely event this cases any problems with how you use the site, we'd love to understand better, please direct
@Jdlrobson
to any on-wiki conversations."
Jdlrobson
reassigned this task from
Jdrewniak
to
Edtadros
Jun 15 2022, 4:25 PM
2022-06-15 16:25:49 (UTC+0)
Jdlrobson
moved this task from
Code Review
to
QA
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jdlrobson
added a subscriber:
Jdrewniak
Maintenance_bot
removed a project:
Patch-For-Review
Jun 15 2022, 4:30 PM
2022-06-15 16:30:08 (UTC+0)
Jdlrobson
updated the task description.
(Show Details)
Jun 15 2022, 4:30 PM
2022-06-15 16:30:50 (UTC+0)
Jdlrobson
moved this task from
QA
to
Ready for Signoff
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jun 15 2022, 9:09 PM
2022-06-15 21:09:57 (UTC+0)
Comment Actions
I've opened all the desktop skins on my mobile phone and didn't notice anything problematic.
Let's keep this one open to allow for the
User-notice
ovasileva
claimed this task.
Jun 16 2022, 5:13 PM
2022-06-16 17:13:25 (UTC+0)
ovasileva
added a subscriber:
Edtadros
Quiddity
moved this task from
To Triage
to
In current Tech/News draft
on the
User-notice
board.
Jun 16 2022, 10:09 PM
2022-06-16 22:09:55 (UTC+0)
Quiddity
subscribed.
Comment Actions
Added to
- It will be frozen for translation in ~22 hours, so any edits are needed before then. Thanks!
Jdlrobson
moved this task from
Ready for Signoff
to
Doing
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jun 22 2022, 9:46 PM
2022-06-22 21:46:31 (UTC+0)
Jdlrobson
claimed this task.
Jun 23 2022, 12:18 AM
2022-06-23 00:18:54 (UTC+0)
Comment Actions
Feedback on
T311119
and
suggests this may not be working as intended. I will look into this before Thursday 1pm.
DogsRNice
subscribed.
Jun 23 2022, 12:23 AM
2022-06-23 00:23:04 (UTC+0)
Comment Actions
This has caused most wikimedia sites to become unusably wide on ipads
Jdlrobson
added a comment.
Jun 23 2022, 12:24 AM
2022-06-23 00:24:55 (UTC+0)
Comment Actions
@DogsRNice
yes we're aware! Right now I'm trying to work out if the impact is just on users using iPads or if it's also impacting the experience on mobile. Are you also experiencing similar problems on a mobile phone? Which version of iPad are you using? Is your experience consistent with the report on
T311119
TheresNoTime
added a subtask:
T311195: Wikimedia Commons pages appear very, very small on mobile devices in desktop mode
Jun 23 2022, 6:26 AM
2022-06-23 06:26:46 (UTC+0)
Jdlrobson
moved this task from
Doing
to
Ready for Signoff
on the
Web-Team-Backlog-Archived (Kanbanana-FY-2021-22)
board.
Jun 23 2022, 5:06 PM
2022-06-23 17:06:44 (UTC+0)
Jdlrobson
mentioned this in
T311119: All Wikimedia projects other than Wikipedia, Test Wikipedia, and Wikinews extremely zoomed out while using Vector Skin on iPad.
Jun 23 2022, 8:33 PM
2022-06-23 20:33:11 (UTC+0)
Jdlrobson
added a comment.
Jun 23 2022, 8:39 PM
2022-06-23 20:39:42 (UTC+0)
Comment Actions
We pushed a change this morning to tweak the viewport based on feedback. We removed the zoom and relaxed the 1200px width to 1000px
I409194accaf5592772fd70ee5b0005ca4199e282
I've documented the learnings in more detail here:
The on-wiki conversations seem to suggest users are happy with the end result. I am going to leave this open over the weekend just in case anything else comes up before resolving.
Quiddity
moved this task from
In current Tech/News draft
to
Already announced/Archive
on the
User-notice
board.
Jun 23 2022, 9:34 PM
2022-06-23 21:34:29 (UTC+0)
TheDJ
subscribed.
Edited
Jun 24 2022, 6:04 AM
2022-06-24 06:04:08 (UTC+0)
Comment Actions
Hmm 1000 is exactly the breakpoint for the sticky header, so now I no longer get a sticky header on my landscape iPad, which I find a bit of a shame.
Also it seems that the font size can no longer be set on iPads, which is also a side effect of this change (see screenshot with font size set to 300%). Adding initial-scale=1.0 to the viewport definition fixes that somehow (hmm, maybe.. hard to verify in the inspector, as viewport evaluation happens at page load)
Jdlrobson
added a comment.
Edited
Jun 24 2022, 7:38 PM
2022-06-24 19:38:13 (UTC+0)
Comment Actions
We will take a look next week
In the meantime editors can workaround this by adding a rule to their user CSS (
Regarding the sticky header, a few editors complained about the max width that also applies at that breakpoint.
Trying to get this view predictable across platforms so we are in a more comfortable place to make Vector responsive (for those that want it via the associated user preference).
@TheDJ
can you change the privacy of your image? An annoying bug is making that default to private
Izno
subscribed.
Jun 24 2022, 9:01 PM
2022-06-24 21:01:08 (UTC+0)
TheDJ
added a comment.
Jun 28 2022, 5:33 AM
2022-06-28 05:33:59 (UTC+0)
Comment Actions
In
T306910#8026353
@Jdlrobson
wrote:
We will take a look next week
In the meantime editors can workaround this by adding a rule to their user CSS (
I think these r distinct issues though….
Jdlrobson
added a comment.
Jun 30 2022, 11:34 PM
2022-06-30 23:34:50 (UTC+0)
Comment Actions
Hmm 1000 is exactly the breakpoint for the sticky header, so now I no longer get a sticky header on my landscape iPad, which I find a bit of a shame.
That should be fixed by
now
Also it seems that the font size can no longer be set on iPads, which is also a side effect of this change (see screenshot with font size set to 300%). Adding initial-scale=1.0 to the viewport definition fixes that somehow (hmm, maybe.. hard to verify in the inspector, as viewport evaluation happens at page load)
Opened
T311795
to look into this more.
I think these r distinct issues though….
Are you saying the Village pump discussion is distinct from the issue you are raising or something else? In the village pump discussion there are 2 concerns raised:
"I was surprised to find the font about 50% larger than it had been last night."
"I can adjust the font size by pressing the Cmd & + (or the cmd & -) keys at the same time. This didn't work."
I believe the font-size change, but I'm not seeing anything too problematic with the current font size, personally (but maybe I'm looking on the wrong version of an iPad?)
I think issue 2 is the biggest problem here so I'd like to make sure we fix that first. I imagine that might fix any issues perceived with 1.
To be continued on
T311795
(feel free to reply here though if I've misrepresented the problems)
Jdlrobson
closed this task as
Resolved
Jun 30 2022, 11:34 PM
2022-06-30 23:34:56 (UTC+0)
Ladsgroup
edited projects, added
User-notice-archive
; removed
User-notice
Aug 13 2022, 1:54 PM
2022-08-13 13:54:04 (UTC+0)
Jdlrobson
mentioned this in
T319305: Consider how Vector 2022 displays on mobile devices
Oct 4 2022, 3:36 PM
2022-10-04 15:36:10 (UTC+0)
PatchDemoBot
added a comment.
Oct 18 2022, 2:12 PM
2022-10-18 14:12:57 (UTC+0)
Comment Actions
Test wiki on
Patch demo
by Jdlrobson using patch(es) linked to this task was
deleted
Jdlrobson-WMF
mentioned this in
T395948: Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1"
Jun 3 2025, 10:39 PM
2025-06-03 22:39:20 (UTC+0)
Log In to Comment
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct.
Wikimedia Foundation
Code of Conduct
Disclaimer
CC-BY-SA
GPL
Credits