Steps to reproduce
- Using the Safari browser (I have not been able to replicate in any other browser), visit https://en.wikipedia.org/wiki/Barack_Obama?useskinversion=2&vectorstickyheader=1
- Scroll down the page to make the sticky header appear and then continue scrolling for a bit
- Click the search toggle icon
Note: You may need to repeat steps 2 and 3 for this bug to surface. For whatever reason, the scroll position seems to jump more frequently after scrolling and then clicking the search toggle vs. clicking the search toggle without prior scrolling although I've seen it happen in either scenario.
Expected results
- Scroll position is maintained after the search toggle is clicked.
Actual results
- Scroll position jumps after the search toggle is clicked.
https://jumpshare.com/v/L9Fd74BgJdYvRhZGUwRB
Environments observed
- Browser version: Version 14.1.2 (16611.3.10.1.6)
- OS version: Mac OS Big Sur 11.6
- Device model: MacBook Pro
- Device language: En
Check any additional observations
- Observed on production https://en.wikipedia.org/wiki/Barack_Obama?useskinversion=2&vectorstickyheader=1
- Observed while logged in
- Observed while not logged in (anonymous)
Developer Notes
Note, I've only been able to replicate this using Safari so something specific to that browser might be causing this.
It's a bit of mystery right now why this is happening. At first I thought this might have something to do with trying to focus an element that isn't visible yet, but even if I change the code locally to always show the search input and delay the focus by 1 second, the jump still occurs: https://jumpshare.com/v/CoqsNSgPC38VqYnWdr3g
QA Steps
First review the video in https://jumpshare.com/v/L9Fd74BgJdYvRhZGUwRB to understand how to (potentially) replicate this bug. It is important to scroll and then click the magnifying glass icon rather than clicking the magnifying glass icon without prior scrolling.
Given that the merged code could potentially affect other browsers, please perform the following steps in Safari, Edge, Firefox, and Chrome:
- Login and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?useskinversion=2&vectorstickyheader=1
- Scroll down the page to make the sticky header appear and then continue scrolling for a bit
- Click the search toggle icon
- Verify that the browser's scroll position doesn't change and the bug doesn't surface
- Click the content area to toggle/make the magnifying glass icon appear again in the sticky header
Repeat steps 2 - 5 as many times as necessary to gain confidence that the bug doesn't appear (e.g. 5 times has been enough for me)
QA Results - Beta
AC | Status | Details |
---|---|---|
1 | ✅ | T297636#7630962 |
QA Results - Prod
AC | Status | Details |
---|---|---|
1 | ✅ | T297636#7630982 |