Twenty Twenty: Menu + Search can cause a scroll jump on close

[kjellr]

If the Twenty Twenty Menu or Search modals are activated while the user is partially scrolled down the page, they will cause a glitchy reaction upon close: the page quickly scrolls to the top, and then back down to the original position. This is visible in Chrome or Firefox, but doesn't seem visible in Safari.

Here are some GIFs to illustrate the issue:

Originally noted in the [support forums ​https://wordpress.org/support/topic/toggle-close-search-menu-rapidly-scrolls-glitch/].

[sabernhardt]

This relates to the scrollTo function inside a setTimeout, within hideAndShowModals.

[karmatosed]

I can confirm this is still an issue in testing so would be good to look at if we do want to resolve.

[nikunj8866]

Attached patch to fix scrol jump

[nikunj8866]

@karmatosed I've attached patch to fix this issue.

[karmatosed]

Thank you @nikunj8866. Let's see about getting some testing and also some eyes on this.

@sabernhardt I'd love to get your opinion on this patch as you've been involved in this ticket before if you have time.

[sabernhardt]

This is JavaScript, so I need someone else's opinion too :)

The patch removes a lot, and at least some of it should remain.

• The clickedEl lines were added to ​avoid focus loss, and those should be kept.
• The modal needs to account for the admin toolbar height when users are logged in. With a new theme, subtracting --wp-admin--admin-bar--height could achieve that, but child themes can replace the stylesheet without replacing the JS.

The comment above the event listener says

Hide the modal after a delay, so animations have time to play out.

The jumping problem with in-page menu links seems to occur only when animations are turned off (prefers-reduced-motion: reduce). If so, the script could check for that media query and then either set the timeout to 0 or possibly even skip the scrollTo effect.

[joedolson]

Assigning to @williampatton to look over.

[poena]

I am moving this back to future release since there has been no updates.

This PR addresses an issue where closing search modal (e.g., mobile menu or search) causes the page to briefly jump to the top and scroll back. The fix ensures smooth scroll restoration by:

• Using behavior: 'instant' in scrollTo for instant position restoration

Trac ticket: #52116

Before:

​https://github.com/user-attachments/assets/935a7aca-e7f6-4476-bce4-15d6f4755b49

After:

​https://github.com/user-attachments/assets/a8d5e63e-00c2-4cf0-ad80-dee538378484

[sainathpoojary]

Hey @sabernhardt @poena

I've revisited this issue and proposed an updated fix in ​PR. This addresses the scroll jump when closing modals while retaining accessibility features and admin bar height.

Please have a look whenever you get a moment.

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8461

Environment

• OS: Windows
• Web Server: Nginx
• PHP: 8.2.23
• WordPress: 6.7.2
• Browser: Chrome Version 134
• Theme: Twenty Twenty

Actual Results

• ✅ Issue resolved with patch.

Supplemental Artifacts

Before Fix:

​https://github.com/user-attachments/assets/ed00e54e-aed6-4974-b2b9-dfc8210bcf42

After Fix:

​https://github.com/user-attachments/assets/a441d400-a200-4bf9-ac0c-f72556680d12