Page MenuHomePhabricator

[Bug] Layout shift impacts TOC behavior when navigating directly to a section using a URI fragment
Open, MediumPublicBUG REPORT

Description

Steps to reproduce

  1. Navigate to https://en.wikipedia.org/wiki/Occitan_language#External_links

Expected results

  • Page should be scrolled to External links and "External links" in the TOC should be bold and black.

Actual results

  • The TOC momentarily focuses "External links" then switches to "Bibliography"

Screen Recording 2023-03-22 at 10.38.47 AM.mov.gif (940×1 px, 617 KB)

Environments observed

  • Browser version: Microsoft Edge Version 111.0.1661.51
  • OS version: MacOS Ventura

Check any additional observations

  • Observed while not logged in (anonymous)
NOTE: Per @nray, this is happening because the purple boxes at the bottom expand and then collapse, making the code think that the user scrolled. See below
2023-03-22_12-26-22 (1).mov.gif (920×1 px, 1 MB)

Developer notes

The code bolds the section that the hash fragment corresponds to until there is a scroll event. If there is a scroll event, the section that intersects with the scroll position is bolded.

When scrolled all the way to the bottom, any layout shift on the page — whether it's from a banner campaign or from something in the content that shifts — can trigger a scroll event that causes this issue.

In the "actual results" image, you can see that the "External Links" is bolded first (albeit briefly) followed by incorrectly bolding "Bibliography". The purple boxes are server rendered in an expanded state and then JS kicks in that collapses them. This causes a layout shift and scroll event that the code interprets as user initiated, so "External Links" is bolded because it corresponds to that scroll position.

Event Timeline

ovasileva triaged this task as Medium priority.Mar 27 2023, 4:23 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.