Page MenuHomePhabricator

[Sticky header] ULS should remain fixed to header when scrolling
Closed, ResolvedPublic3 Estimated Story Points

Description

Steps to reproduce

  1. Go to https://en.wikipedia.org/wiki/Japan?vectorstickyheader=1
  2. Scroll down the page until sticky header appears and open the ULS
  3. Continue scrolling

Observed: ULS stays open and scrolls out of view
Expected: ULS should scroll along with the header (similar to the user menu)

Design

QA Results - Beta

ACStatusDetails
1T295391#7556887

QA Results - Prod

ACStatusDetails
1T295391#7568159

Event Timeline

LGoto added a subscriber: Jdlrobson.
ovasileva updated the task description. (Show Details)
alexhollender_WMF renamed this task from Sticky header: ULS scrolls out of view instead of closing to [Sticky header] ULS should remain fixed to header when scrolling.Nov 15 2021, 6:48 PM
alexhollender_WMF updated the task description. (Show Details)

The ULS overlay's position is calculated and set in the ULS extension. It also has "Display settings" and "Input settings" buttons, both of which open new overlays that are also positioned similarly.

This task could be achieved by updating the ULS extension to support fixed positioning, i.e. through a new option. This option would update the CSS and the positioning logic. Because fixed positioning is relative to the window viewport, this could be done by updating the positioning logic for the top attribute to account for the scroll height.

We also would need a better way to distinguish between ULS instances, as right now both content language switcher buttons are instantiated the same via the .mw-interlanguage-selector class.

bwang removed bwang as the assignee of this task.Nov 16 2021, 11:02 PM
bwang subscribed.

Change 740962 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/UniversalLanguageSelector@master] Accommodate Vector sticky header in menu positioning

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

Jdrewniak subscribed.

Change 740962 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Accommodate Vector sticky header in menu positioning

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.org/wiki/Japan?vectorstickyheader=1
Scroll down the page until sticky header appears and open the ULS
Continue scrolling
✅ AC1: Expected: ULS should scroll along with the header (similar to the user menu)

Screen Recording 2021-12-08 at 9.19.38 AM.mov.gif (640×870 px, 3 MB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki{F34882850}
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.org/wiki/Japan?vectorstickyheader=1
Scroll down the page until sticky header appears and open the ULS
Continue scrolling
✅ AC1: Expected: ULS should scroll along with the header (similar to the user menu)

Screen Recording 2021-12-13 at 3.42.17 PM.mov.gif (928×870 px, 3 MB)