Page MenuHomePhabricator

[Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

Currently when the sticky header appears, the TOC jumps down. Note: this only happens if you are logged-in (because logged-out people do not get a sticky header).

To-do

.mw-table-of-contents-container starts out with top: 0. When the sticky header appears some new classes get added and override the top value to top: 3.125rem !important. I think the easiest fix would be, for logged-in only, to set the initial value of top to match the value of top when the sticky header appears (i.e. 3.125rem !important).

Before & after comparison

before (TOC jumps)after (TOC doesn't jump)

QA Results - Beta

ACStatusDetails
1T314330#8272583

QA Results - Prod

ACStatusDetails
1T314330#8272597

Event Timeline

alexhollender_WMF added a subscriber: Quiddity.

thanks to @Quiddity for calling our attention to this issue

ovasileva triaged this task as Medium priority.Aug 4 2022, 9:15 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.
ovasileva raised the priority of this task from Medium to High.Aug 31 2022, 2:17 PM

Blocker for deployment

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

[mediawiki/skins/Vector@master] Set top value for ToC when sticky header is enabled.

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

Just in case it helps, my personal user.css is adding code to prevent 2 movements:

  • Fixing the "jump",
  • and also removing any movement of the ToC-container at all (if the Main-menu is collapsed).

I wonder if something like this might be worth considering.

Code is here (and possibly other related lines, elsewhere within it) https://www.mediawiki.org/wiki/User:Quiddity/Vector-2022-condensed.css#L-129
Caveats:
-My code doesn't seem to work perfectly in the logged-out view (the ToC-container still moves). [I haven't tried to fix this yet]
-I'm also doing other changes that makes the Site-header become the "Sticky"-header (and adds a supplementary Page-toolbar that appears on scroll), which might mean this is less feasible with the default Sticky-header.

Jdrewniak reassigned this task from Jdrewniak to bwang.
Jdrewniak added a subscriber: bwang.

Change 831118 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Set top value for ToC when sticky header is enabled.

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

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

[mediawiki/skins/Vector@master] Modify top value of the uncollapsed ToC when sticky header enabled

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

Change 832629 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Modify the sticky header offset styles

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: when scrolling down the page, at the point when the sticky header appears, the TOC should not move jump down

Screen Recording 2022-09-29 at 6.47.22 AM.mov.gif (684×1 px, 1 MB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: when scrolling down the page, at the point when the sticky header appears, the TOC should not move jump down

Screen Recording 2022-09-29 at 6.49.00 AM.mov.gif (684×1 px, 1 MB)

Looks good, resolving