Page MenuHomePhabricator

Sticky header: ensure sticky header appears above other sticky elements
Closed, ResolvedPublic3 Estimated Story Points

Description

T289716 introduced a sticky header skeleton. This task aims to ensure compatibility with widely used on-wiki templates that use fixed elements.

Background

Some concerns were raised around the behavior of the sticky header along with other sticky elements on the page (for example sticky table headers on dewiki)

Acceptance criteria

  • Ensure sticky header appears above other sticky page elements for example table elements in https://de.wikipedia.org/wiki/Elvis_Presley/Diskografie without any changes.
  • There should be a general solution allowing template editors to add a class to their markup to add compatibility

Developer notes

Ideally we'd have a general solution and will begin communication with template developers about what they need to change in their templates to guarantee support with the sticky header feature. This should be as simple as adding a class e.g. "mw-sticky-header-element".

QA

Scroll to headers on https://de.wikipedia.org/wiki/Elvis_Presley/Diskografie and ensure that the headers stick to the bottom of the sticky header.

For local testing:

  • Use de for content provider in local settings - i.e.
$wgMFMwApiContentProviderBaseUri = 'https://de.wikipedia.org/w/api.php';

QA Results - Beta

ACStatusDetails
1T289817#7407269

QA Results - Prod

ACStatusDetails
1T289817#7412204

Event Timeline

ovasileva created this task.

noting that wikidata uses sticky elements as well:

Change 722475 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Accommodate other stick elements with sticky header

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

cjming added a subscriber: cjming.

@Jdrewniak Are we sure the scroll padding works with elements that use sticky positioning? I've tried using scroll padding on https://meta.wikimedia.org/wiki/Schema:UniversalLanguageSelector?useskinversion=2&vectorstickyheader=1 and it seems like the sticky elements still overlap the sticky header: https://jumpshare.com/v/4Uq0fo3eiMGlY7TD46wt

Change 722475 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Accommodate other sticky elements with sticky header

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

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

Test Artifact(s):

QA Steps

✅ AC1: Scroll to headers on https://de.wikipedia.beta.wmflabs.org/w/index.php?title=TableTest and ensure that the headers (for the Studioalben table) stick to the bottom of the sticky header.

Screen Recording 2021-10-06 at 8.03.33 PM.mov.gif (710×1 px, 3 MB)

Edtadros added a subscriber: Edtadros.

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

Test Artifact(s):

QA Steps

✅ AC1: Scroll to headers on https://de.wikipedia.org/wiki/Elvis_Presley/Diskografie and ensure that the headers (for the Studioalben table) stick to the bottom of the sticky header.

Screen Recording 2021-10-08 at 6.51.13 AM.mov.gif (970×860 px, 3 MB)

Looks good, resolving

I have noticed one issue: if I want to jump to one of the references from the footnotes, the position I jump to is below the sticky header, but not below the other sticky elements. Example: try to jump to reference 6 in the Elvis discography; it will be hidden under the sticky table header. Now, this problem is of course already present on these pages even without the sticky site header, but I was wondering if this could be fixed since it can be done for the sticky site header (I guess the unpredictability of the height of such elements makes a solution difficult though).