Page MenuHomePhabricator

[Unplanned] Vector 2022 sidebar is automatically collapsed on exactly 1000px breakpoint
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • While authenticated, Open any page on ro.wikipedia.org (desktop version) from Firefox for Android
  • Click on the burger button to show the sidebar
  • Click on any Wikipedia link from the page

What happens?: on the new page, the sidebar is no longer displayed.

What should have happened instead?: the sidebar should have been displayed until hidden again, like for desktop browsers.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.): FF 104.2.0 on Android 12

QA Results - Beta

ACStatusDetails
1T321745#8449569

QA Results - Prod

ACStatusDetails
1T321745#8476720

Event Timeline

Jdlrobson renamed this task from The option to show the Vector 2022 sidebar is not saved on FF mobile to [Firefox mobile] Vector 2022 sidebar is automatically collapsed.EditedOct 27 2022, 3:08 PM
Jdlrobson subscribed.

The preference seems to be saved. What's happening is we have code that is collapsing the sidebar at lower resolutions and incorrectly this is being triggered in the browser.

This seems like an upstream Firefox bug. It is using the device width rather than the viewport width from what I can see.

Jdlrobson renamed this task from [Firefox mobile] Vector 2022 sidebar is automatically collapsed to [Mobile] Vector 2022 sidebar is automatically collapsed.EditedOct 27 2022, 3:10 PM
Jdlrobson added a project: Web-Team-Backlog.

Also happening on Chrome for Android. I think the matchMedia query should be 1px less.

Jdlrobson renamed this task from [Mobile] Vector 2022 sidebar is automatically collapsed to Vector 2022 sidebar is automatically collapsed on exactly 1000px breakpoint.Oct 27 2022, 3:14 PM

I'm not so sure that would help in my case. The screen resolution is (2340 ×1080 pixels), but experimenting with the basic code from Mozilla seems to indicate the limit is ~200px in portrait mode and ~750px in landscape. Do you have any idea why I would see these results?

I'm not so sure that would help in my case. The screen resolution is (2340 ×1080 pixels), but experimenting with the basic code from Mozilla seems to indicate the limit is ~200px in portrait mode and ~750px in landscape. Do you have any idea why I would see these results?

If you load Wikipedia on your phone and view source you will see the following:
<meta name="viewport" content="width=1000"/>

So whatever your device / screen resolution the site is being told to render at 1000px.
My best guess is this line: https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.js/sidebarPersistence.js#L118 should be var mediaQuery = window.matchMedia( '(max-width: 999px)' );

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

[mediawiki/skins/Vector@master] Bug: Fix when Vector 2022 sidebar collapses

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

Change 859591 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Bug: Fix when Vector 2022 sidebar collapses

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

Jdlrobson added a subscriber: ovasileva.

@ovasileva this one came up while I was analysing T322051 (was a one line change) so moving into board and into QA.

Jdlrobson renamed this task from Vector 2022 sidebar is automatically collapsed on exactly 1000px breakpoint to [Unplanned] Vector 2022 sidebar is automatically collapsed on exactly 1000px breakpoint.Dec 1 2022, 9:20 PM
Jdlrobson assigned this task to Edtadros.
Jdlrobson set the point value for this task to 1.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: Android v9.0
Browser: Firefox
Device: Samsung Galaxy Note
Emulated Device:NA

Test Artifact(s):

QA Steps

While authenticated, Open any page on ro.wikipedia.org (desktop version) from Firefox for Android
Click on the burger button to show the sidebar
Click on any Wikipedia link from the page
✅ AC1: the sidebar should have been displayed until hidden again, like for desktop browsers.

Screen Recording 2022-12-06 at 8.15.55 PM.mov.gif (608×1 px, 583 KB)

Screen Recording 2022-12-06 at 8.16.58 PM.mov.gif (608×1 px, 642 KB)

@Edtadros both tests seem to have been made in landscape mode. Would you mind confirming that the fix also works in portrait mode? I know that since there is a fixed viewport it is very likely to work, but I think it makes sense to check before deploying. Thank you.

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: rowiki
OS: Android v12.0
Browser: Firefox
Device: Samsung Galaxy S22+
Emulated Device:NA

Test Artifact(s):

QA Steps

While authenticated, Open any page on ro.wikipedia.org (desktop version) from Firefox for Android
Click on the burger button to show the sidebar
Click on any Wikipedia link from the page
✅ AC1: the sidebar should have been displayed until hidden again, like for desktop browsers.

Screen Recording 2022-12-18 at 2.06.44 PM.mov.gif (1×590 px, 1 MB)