Page MenuHomePhabricator
Create Task
Maniphest T271868

New Vector skin breaks "position: sticky" layouts
Closed, ResolvedPublicBUG REPORT
Actions

Description

In the desktop version of the Special:MediaSearch page on Commons, we have a sidebar panel that shows expanded preview information for a given search result. This element is intended to remain fixed on the right edge of the page as the user scrolls through the list of results. This is accomplished using a position: sticky rule.

This behavior no longer works in new vector (as currently deployed on Beta Commons or in a vagrant dev environment). The page in old vector on production commons still behaves as expected.

Steps to Reproduce:
Go to the Beta Commons MediaSearch page and search for a term. Example:
https://commons.wikimedia.beta.wmflabs.org/wiki/Special:MediaSearch?type=bitmap&q=cat

Click a result to expand the right-hand sidebar, then continue scrolling down the page.

Actual Results:
The sidebar scrolls out of view as the user continues down the page.

Expected Results:
The sidebar should remain "sticky" in the user's viewport.
See here for correct behavior in old vector: https://commons.wikimedia.org/wiki/Special:MediaSearch?type=bitmap&q=desert

QA Results - Beta

ACStatusDetails
1✅T271868#6765597

QA Results - Prod

ACStatusDetails
1✅T271868#6773341

Details

SubjectRepoBranchLines +/-
Only override .mw-page-container horizontal padding on tablet+ viewport widthmediawiki/skins/Vectormaster+2 -1
Use padding margin-collapse hack instead of overflowmediawiki/skins/Vectormaster+3 -5
Customize query in gerrit

Related Objects

Event Timeline

egardner created this task.Jan 12 2021, 10:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 12 2021, 10:56 PM
Jdlrobson added projects: Vector (legacy skin), Desktop Improvements (Vector 2022).Jan 13 2021, 12:00 AM
ovasileva triaged this task as Medium priority.Jan 13 2021, 5:40 PM
gerritbot added a comment.Jan 14 2021, 10:16 PM

Change 654471 had a related patch set uploaded (by Jdlrobson; owner: Esanders):
[mediawiki/skins/Vector@master] Use padding margin-collapse hack instead of overflow

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

gerritbot added a project: Patch-For-Review.Jan 14 2021, 10:16 PM
Jdlrobson mentioned this in T270146: New Vector breaks OO.ui.Element.static.scrollIntoView and sticky layouts.Jan 14 2021, 10:18 PM
Jdlrobson moved this task from Needs Analysis to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson subscribed.

This is the same problem as T271868 for which I just merged Ed's patch.

gerritbot added a comment.Jan 14 2021, 10:42 PM

Change 654471 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use padding margin-collapse hack instead of overflow

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

Maintenance_bot removed a project: Patch-For-Review.Jan 14 2021, 11:11 PM
gerritbot added a comment.Jan 15 2021, 6:52 PM

Change 656489 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Don't override vertical padding on .mw-page-container on tablet+ viewport width

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

gerritbot added a project: Patch-For-Review.Jan 15 2021, 6:52 PM
gerritbot added a comment.Jan 15 2021, 7:23 PM

Change 656489 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Only override .mw-page-container horizontal padding on tablet+ viewport width

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

Maintenance_bot removed a project: Patch-For-Review.Jan 15 2021, 8:10 PM
Esanders subscribed.Jan 16 2021, 5:07 PM

This also affects the sticky button bar on Special:Preference (for save/cancel buttons). The patch above appears to fix it.

ovasileva assigned this task to Edtadros.Jan 18 2021, 6:12 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jan 21 2021, 2:57 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps to Reproduce:
Go to the Beta Commons MediaSearch page and search for a term. Example:
https://commons.wikimedia.beta.wmflabs.org/wiki/Special:MediaSearch?type=bitmap&q=cat

Click a result to expand the right-hand sidebar, then continue scrolling down the page.

✅ AC1: Expected Results:
The sidebar should remain "sticky" in the user's viewport.
See here for correct behavior in old vector: https://commons.wikimedia.org/wiki/Special:MediaSearch?type=bitmap&q=desert

Screen Recording 2021-01-21 at 6.55.48 AM.mov.gif (792×920 px, 3 MB)

Edtadros updated the task description. (Show Details)Jan 21 2021, 2:59 PM
Edtadros reassigned this task from Edtadros to ovasileva.Jan 25 2021, 2:05 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: commons
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps to Reproduce:
Go to the Commons MediaSearch page and search for a term. Example:
https://commons.wikimedia.org/wiki/Special:MediaSearch?type=bitmap&q=cat

Click a result to expand the right-hand sidebar, then continue scrolling down the page.

✅ AC1: Expected Results:
The sidebar should remain "sticky" in the user's viewport.

Screen Recording 2021-01-25 at 6.00.45 AM.mov.gif (1×964 px, 2 MB)

Edtadros updated the task description. (Show Details)Jan 25 2021, 2:06 PM
ovasileva closed this task as Resolved.Jan 25 2021, 4:22 PM
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 · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL