Page MenuHomePhabricator

StickyHeaders: Bug Bash IV: Revenge of the Son of Bug Bash (UX/UI)
Closed, ResolvedPublic5 Estimated Story Points

Description

Refine some of the JS/CSS for the feature:

  • Ensure that loading pages with anchor links pointing to deeply nested sections works properly
  • Ensure that collapsing sections properly triggers scroll to relevant areas
  • other things TBD

Minor bugs so far:

  • The Parsoid version of the Sticky Headers styles may benefit from z-index: 1 to ensure content elements like images never overlap them. The legacy parser styles already do this. (Patch)
  • section headers with more than one line peak through the sticky header - see T410441
  • Our autoscroll requirement assumes that the reader wants to go down, not up. I think we should remove it (This patch should address this)
  • Our experiment won't run on pages referred from "Related articles" e.g. (out of scope / expected behavior)
  • Closing sections jumps to random points in the section below Patch
  • Bullet points "peak out" from beside the scrolling headers
    • now fixed for unordered lists (bullet points) and short ordered lists
    • could still occur with long ordered lists (numbers with multiple digits)
    • we could be even more proof against this sort of problem with bigger changes to the Minerva skin's body content and heading and section margin/padding but this may require tweaking HTML to avoid changing the visible layout

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
HSwan-WMF renamed this task from StickyHeaders: Refine the UI/UX to StickyHeaders: Bug Bash IV: Revenge of the Son of Bug Bash (UX/UI).Nov 5 2025, 5:55 PM
HSwan-WMF set the point value for this task to 5.
HSwan-WMF moved this task from Needs Refinement to Ready on the Reader Growth Team board.

T409349 can either live separately or merge in here.

Closing sections jumps to random points in the section below

Bullet points "peak out" from beside the scrolling headers

Screenshot 2025-11-17 at 12.06.31 PM.png (986×1 px, 350 KB)

Our autoscroll requirement assumes that the reader wants to go down, not up. I think we should remove it (edited)

JScherer-WMF updated the task description. (Show Details)
JScherer-WMF updated the task description. (Show Details)
JScherer-WMF updated the task description. (Show Details)

Change #1206457 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/ReaderExperiments@master] Remove scroll into view

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

UX Direction for Collapsing Sections
  1. Team agreed that the current auto-scroll behavior is confusing and buggy and that the desired behavior (whatever it is) needs to be clearly specified.
  2. There was no final decision to remove auto-scroll.
The discussion split between three possible paths
  1. Remove auto-scroll entirely because simpler code is better.
  2. Keep auto-scroll because users will get lost when collapsing long sections.
  3. Fix the timing / implementation (scroll after collapse animation).
Next Steps

Before changing anything, we need to write a clear specification of the intended behavior of collapsing and scrolling.
And only after that should a fix (removal, improvement, or replacement) be implemented.

UX Specification — Collapsible Sticky Headers (Scroll Behavior)

Core UX Principle

Collapsing a section should hide content without repositioning the user in the article.
Users should never feel like collapsing a section moved them somewhere else.

Behavior Requirements
Collapsing a Section

When the user taps/clicks a section header to collapse it:

  1. The section’s content is removed from view.
  2. The header that initiated the collapse remains in the same viewport position it occupied immediately before collapsing.
  3. No automatic scrolling should occur as a result of collapsing.

If user is deep within section content, content disappears and the header moves upward until it reaches its prior viewport position; no further scrolling happens

Change #1206958 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] WIP Sticky Headers: quick hack at poking the scroll-after-close

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

Found another issue here with the edit button

Screenshot 2025-11-18 at 4.54.13 PM.png (768×576 px, 120 KB)

Change #1207277 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/ReaderExperiments@master] Bump up z index for sticky header

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

Change #1206958 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Sticky Headers: clean up scroll-after-close logic

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

Change #1210736 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/ReaderExperiments@master] Add left margin to remove peeking

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

Bullet points "peak out" from beside the scrolling headers

Screenshot 2025-11-17 at 12.06.31 PM.png (986×1 px, 350 KB)

I can't reproduce this to test the associated patch. Is there a specific sample page and screen size that triggers it?

Change #1206457 abandoned by Kimberly Sarabia:

[mediawiki/extensions/ReaderExperiments@master] Remove scroll into view

Reason:

No longer needed

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

Change #1213548 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: fix Minerva list styling for "peeking" bullet points

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

Repro Steps for Bullets Peeking Through
Check Safari on Mac and all iOS browsers
See on Minerva Mobile mode
Example page: https://en.wikipedia.org/wiki/International_Space_Station?stickyHeaders=1#International_co-operation
Example screenshot
cc: @egardner

Change #1207277 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Bump up z index for sticky header

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

Change #1213548 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: fix Minerva list styling for "peeking" bullet points

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

Change #1213570 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@wmf/1.46.0-wmf.4] StickyHeaders: fix Minerva list styling for "peeking" bullet points

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

Change #1213570 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@wmf/1.46.0-wmf.4] StickyHeaders: fix Minerva list styling for "peeking" bullet points

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

Mentioned in SAL (#wikimedia-operations) [2025-12-01T21:29:13Z] <bvibber@deploy2002> Started scap sync-world: Backport for [[gerrit:1213570|StickyHeaders: fix Minerva list styling for "peeking" bullet points (T409325)]]

Mentioned in SAL (#wikimedia-operations) [2025-12-01T21:31:02Z] <bvibber@deploy2002> bvibber: Backport for [[gerrit:1213570|StickyHeaders: fix Minerva list styling for "peeking" bullet points (T409325)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-12-01T21:36:21Z] <bvibber@deploy2002> Finished scap sync-world: Backport for [[gerrit:1213570|StickyHeaders: fix Minerva list styling for "peeking" bullet points (T409325)]] (duration: 07m 08s)

bvibber updated the task description. (Show Details)

Ready for QA on bullet points "peeking", live sites have the patch. "International Space Station" on enwiki, "International Cooperation" section should have some nice bullet lists

Eric showed me this feature today and I found a bug: when I view https://en.wikipedia.beta.wmcloud.org/wiki/Paris?useskin=minerva&useformat=mobile&stickyHeaders=1&useparsoid=1 in Chrome with mobile device emulation (I used the "Pixel 7" dimensions, 412x915px) and I scroll from the "Etymology" to the "History" section, there's an oscillation bug where the ext-readerExperiments-stickyHeaders on the "Etymology" heading is rapidly removed and re-added and removed again. This doesn't happen for any of the other section transitions on this page, and it also doesn't happen on the non-Parsoid version of the page for some reason.

Another bug: the sticky header isn't wide enough to cover the entire width of the screen, so very occasionally some things on the page can appear beside it when you scroll. This happens for example on pages with a large number of references:

image.png (746×436 px, 131 KB)

Another bug: the sticky header isn't wide enough to cover the entire width of the screen, so very occasionally some things on the page can appear beside it when you scroll. This happens for example on pages with a large number of references:

ah yes the ordered lists :D

I'll see if I can make a more thorough opaque heading without breaking the layout. ;)

there's an oscillation bug where the ext-readerExperiments-stickyHeaders on the "Etymology" heading is rapidly removed and re-added and removed again.

This sounds like an intersection observer problem, and I'll take a peek at it too if I can.

Change #1210736 abandoned by Kimberly Sarabia:

[mediawiki/extensions/ReaderExperiments@master] Add left margin to remove peeking

Reason:

No longer needed.

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

Change #1214153 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: reworked fix for ul, ol bullet points "peeking"

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

Eric showed me this feature today and I found a bug: when I view https://en.wikipedia.beta.wmcloud.org/wiki/Paris?useskin=minerva&useformat=mobile&stickyHeaders=1&useparsoid=1 in Chrome with mobile device emulation (I used the "Pixel 7" dimensions, 412x915px) and I scroll from the "Etymology" to the "History" section, there's an oscillation bug where the ext-readerExperiments-stickyHeaders on the "Etymology" heading is rapidly removed and re-added and removed again. This doesn't happen for any of the other section transitions on this page, and it also doesn't happen on the non-Parsoid version of the page for some reason.

I haven't been able to reproduce this with the given link on Chrome in mobile device emulation mode set to Pixel 7" on either a Mac with native display density 200% or a Windows PC with native display density 150%.

I definitely believe such a bug is possible though ;)

Have reproduced it on another section and investigating.

Change #1214167 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: possible fix for 'bouncing' on sticky offset

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

Change #1214606 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Refactor dynamic sticky header position

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

Change #1214153 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: reworked fix for ul, ol bullet points "peeking"

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

Change #1214167 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] StickyHeaders: possible fix for 'bouncing' on sticky offset

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

Change #1214606 abandoned by Matthias Mullie:

[mediawiki/extensions/ReaderExperiments@master] Refactor dynamic sticky header position

Reason:

Not worth the hassle right now

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

Checked on enwiki wmf.5 with ?stickyHeaders=1. Specifically I went over all reported issues in this phab tasks. Below is the summary of testing. I marked with the issue that probably could be addressed as a bug.

(1)

Checked for whether two (or more) lines headers are handled nicely when scrolling, un-collapsing/collapsing - no issues found.

(2)

Closing sections jumps to random points in the section below

Seems to be fixed - the collapsing/uncollapsing UX is smooth according to the specs in https://phabricator.wikimedia.org/T409325#11385480.
Note On real device (iPhone 11) when a header is collapsed, a viewport would jump up to the top of the article. Not reproducible in browser emulator. Most likely it's specific only to iPhone 11.

(3)

Our experiment won't run on pages referred from "Related articles" e.g.

https://en.wikipedia.org/w/index.php?title=The_Expanse_(novel_series)&wprov=rarw1%20?stickyHeaders=1

It'd be great to have clarification on steps that reproduce the issue. The corrected url - https://en.wikipedia.org/w/index.php?title=The_Expanse_(novel_series)?wprov=rarw1%20&stickyHeaders=1 - is showing sticky headers.

(4)

Bullet points "peak out" from beside the scrolling headers

Screenshot 2025-11-17 at 12.06.31 PM.png (986×1 px, 350 KB)

Another bug: the sticky header isn't wide enough to cover the entire width of the screen, so very occasionally some things on the page can appear beside it when you scroll. This happens for example on pages with a large number of references:

image.png (746×436 px, 131 KB)

The easiest way to reproduce it - go to an article Reference section that has two-digits number (e.g. https://en.wikipedia.org/wiki/Harry_McKirdy?stickyHeaders=1). Scroll up, the first digit of a two-digit number will be displayed behind the sticky header:

Screenshot 2025-12-04 at 3.18.39 PM.png (1×914 px, 331 KB)

(5)

Found another issue here with the edit button

Screenshot 2025-11-18 at 4.54.13 PM.png (768×576 px, 120 KB)

Fixed - see the screenshot below for https://en.wikipedia.org/w/index.php?title=Swan_maiden&stickyHeaders=1 The edit pencil icons are successfully hidden beneath the sticky header.

Screenshot 2025-12-04 at 4.14.10 PM.png (1×828 px, 221 KB)

(6)

Eric showed me this feature today and I found a bug: when I view https://en.wikipedia.beta.wmcloud.org/wiki/Paris?useskin=minerva&useformat=mobile&stickyHeaders=1&useparsoid=1 in Chrome with mobile device emulation (I used the "Pixel 7" dimensions, 412x915px) and I scroll from the "Etymology" to the "History" section, there's an oscillation bug where the ext-readerExperiments-stickyHeaders on the "Etymology" heading is rapidly removed and re-added and removed again. This doesn't happen for any of the other section transitions on this page, and it also doesn't happen on the non-Parsoid version of the page for some reason.

I haven't been able to reproduce this with the given link on Chrome in mobile device emulation mode set to Pixel 7" on either a Mac with native display density 200% or a Windows PC with native display density 150%.

I definitely believe such a bug is possible though ;)

Checked on enwiki beta- the issue is present but it's looks less dramatic than when it was initially reported.

Re:

(4)

In T409325#11379970, @JScherer-WMF wrote:
Bullet points "peak out" from beside the scrolling headers

I think we have addressed this with Brooke's patch.

Latest test:

Screenshot 2025-12-05 at 3.36.48 PM.png (1×824 px, 1 MB)

matthiasmullie subscribed.

Everything in here has either been dealt with, or split off into separate tickets. We're done here, all is good!