[Bug] Sticky header doesn't show sometimes
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	• nray
	Feb 9 2022, 11:46 PM

Description

There is a race condition that can prevent the sticky header from showing. It is especially prevalent on long pages, slow connections, and if the JS has been cached.

Steps to reproduce

Throttle your internet connection using the "Network" tab in Chrome dev tools. Choose "Fast 3g" speed or slower:

Login and visit https://en.wikipedia.org/wiki/Barack_Obama?useskin=vector-2022
Scroll past the first heading

If the sticky header shows, refresh your browser and try again. The bug will only appear under certain conditions. Cached JS will make the bug more likely to surface.

Expected results

Sticky Header appears.

Actual results

Sticky Header does not appear.

Environments observed

Browser version: Chrome
OS version: Mac OS 11.6
Device model: MacBook Pro
Device language: en

Check any additional observations

Observed on a production wiki
Observed on Vector desktop skin
Observed on MinervaNeue responsive skin
Observed while logged in
Observed while not logged in (anonymous)

Developer Notes

There is a DOM query for the #vector-sticky-header element that can execute before the DOM has finished loading. If the element is not found by the time this query executes, the sticky header will not show.

There is code that waits for the DOM to complete before calling the main method from the skins.vector.es6 module, but the code outside of this method (including the DOM query) will not be deferred.

Details

	Subject	Repo	Branch	Lines +/-
	Move sticky header DOM queries into main.js	mediawiki/skins/Vector	master	+102 -98

Customize query in gerrit

Related Objects

Mentioned Here: T307345: Sticky header disappears within lead sections of certain articles when old table of contents scrolls into view

Event Timeline

• nray created this task.Feb 9 2022, 11:46 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 9 2022, 11:46 PM

• nray updated the task description. (Show Details)Feb 9 2022, 11:47 PM

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Feb 9 2022, 11:54 PM

ovasileva triaged this task as Medium priority.Feb 10 2022, 2:42 PM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 10 2022, 6:16 PM

LGoto moved this task from Incoming to Sticky header on the Desktop Improvements (Vector 2022) board.Feb 28 2022, 6:35 PM

LGoto set the point value for this task to 2.Feb 28 2022, 6:38 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang claimed this task.Mar 17 2022, 5:12 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

@nray I've tried as slow as 2G throttling and I'm still having some trouble reproducing this, do you have any tips on how to get this race condition to show?

@bwang For me, it happens nearly every time I use "Fast 3G" throttling on a long page like the Barack Obama page:

https://jumpshare.com/v/krxssDKgvIxP2Gcl8K3A

Long pages, slow connection, and cached JS will be the conditions most likely to reproduce it

Another thing you can do is put a console.log( document.readyState ); at the top of stickyHeader.js and see if it ever reports "loading" . If it does even once, it means this race condition is possible as the DOM has not finished loading by the time that has executed

@nray Oh oops I was using FF instead of Chrome, I see it now thanks!

Change 773341 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Move sticky header DOM queries into main.js

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

gerritbot added a project: Patch-For-Review.Mar 23 2022, 8:45 PM

bwang removed bwang as the assignee of this task.Mar 24 2022, 5:38 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang subscribed.

bwang assigned this task to • nray.Mar 24 2022, 6:32 PM

• nray reassigned this task from • nray to bwang.Mar 30 2022, 12:57 AM

• nray moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 773341 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Move sticky header DOM queries into main.js

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

• nray reassigned this task from bwang to Edtadros.Mar 30 2022, 4:45 PM

• nray moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Mar 30 2022, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Mar 30 2022, 5:10 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Throttle your internet connection using the "Network" tab in Chrome dev tools. Choose "Fast 3g" speed or slower:
Login and visit https://en.wikipedia.org/wiki/Barack_Obama?useskin=vector-2022
Scroll past the first heading
❓ AC1: Sticky Header appears.
@nray, sometimes I get the sticky header to appear. It appears much faster in the Early life an career section, here are a few screen grabs.

Screen Recording 2022-04-04 at 4.04.51 PM 2.mov.gif (889×1 px, 3 MB)

Screen Recording 2022-04-04 at 4.00.33 PM.mov.gif (1×1 px, 2 MB)

Screen Recording 2022-04-04 at 4.06.35 PM.mov.gif (1×1 px, 2 MB)

• nray reassigned this task from • nray to bwang.Apr 4 2022, 11:21 PM

I'm seeing the sticky header appear on beta cluster with Fast 3G and Slow 3g. This looks like a pass to me!

bwang moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 20 2022, 4:28 PM

This looks like a pass in prod to me, I cant reproduce the original issue.

Screen Shot 2022-04-25 at 12.42.30 PM.png (996×3 px, 743 KB)

bwang moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 25 2022, 5:50 PM

bwang removed bwang as the assignee of this task.Apr 25 2022, 5:55 PM

Jdlrobson moved this task from Needs triage to Vector 2022 (tracking) on the Vector (legacy skin) board.Apr 25 2022, 9:34 PM

I am not sure if this is a new bug: whenever I scroll down on this page on dewiki, the sticky header seemingly gets confused by the intro. Starting from the very top, the header first shows when I reach the tabs. Then, in the middle of the first list of the intro (around the item requests for the attention of an administrator, it suddenly vanishes. Only when I reach the first regular section of the page, the header returns. When scrolling upwards, the header does not show at all once I'm above the first section. What is happening here, can others reproduce this (using Chrome, btw)?

ovasileva claimed this task.Apr 26 2022, 5:17 PM

@XanonymusX - thanks for reporting this. I can't seem to reproduce. Is there a chance you can take a screenshot/video of the behavior?

I can also reproduce it on this page, but not on eg this one. Thus it can’t just be the length of the introduction. Also happens in safemode. I made videos of the behaviour, but it seems I can’t upload them here …

EDIT: If I change the screen size, the behaviour sometimes happens and sometimes doesn't, I can't find any logic. The only thing that stays the same seems to be that the header always disappears in the lead section when scrolling up, I'm not sure if that is the desired behavior.

@XanonymusX thanks for reporting and trying to debug this. I'm seeing the bug you mentioned on https://de.wikipedia.org/w/index.php?title=Wikipedia:Fragen_zur_Wikipedia as well as on https://en.wikipedia.org/wiki/Barack_Obama.

@XanonymusX, @alexhollender_WMF - opened T307345: Sticky header disappears within lead sections of certain articles when old table of contents scrolls into view to track this. Resolving this task.

	F35067420: Screen Shot 2022-04-25 at 12.42.30 PM.png
	Apr 25 2022, 5:47 PM

	F35038484: Screen Recording 2022-04-04 at 4.04.51 PM 2.mov.gif
	Apr 4 2022, 11:13 PM

	F35038471: Screen Recording 2022-04-04 at 4.00.33 PM.mov.gif
	Apr 4 2022, 11:13 PM

	F35038480: Screen Recording 2022-04-04 at 4.06.35 PM.mov.gif
	Apr 4 2022, 11:13 PM

	F34947000: Screen Shot 2022-02-09 at 4.15.19 PM.png
	Feb 9 2022, 11:46 PM

[Bug] Sticky header doesn't show sometimesClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions