Skip to content

Prevent overscroll bounce for stage and inspector surfaces#78587

Open
himanshupathak95 wants to merge 1 commit into
WordPress:trunkfrom
himanshupathak95:fix/78564-boot-layout-overscroll
Open

Prevent overscroll bounce for stage and inspector surfaces#78587
himanshupathak95 wants to merge 1 commit into
WordPress:trunkfrom
himanshupathak95:fix/78564-boot-layout-overscroll

Conversation

@himanshupathak95
Copy link
Copy Markdown
Contributor

What?

Closes #78564

What?

Adds overscroll-behavior-y: none to .boot-layout__stage and .boot-layout__inspector to prevent the elastic rubber-band effect when scrolling past page boundaries.

Why?

Scrolling past the top or bottom of the stage/inspector surfaces triggers a native elastic bounce. Because these elements use rounded corners (border-radius: 8px), the bounce visually pulls the content away from the rounded edges, exposing the background color underneath. This creates a jarring visual glitch that breaks the polished canvas appearance.

How?

A single CSS property addition

overscroll-behavior-y: none

Non-supporting browsers simply ignore the property.

Testing Instructions

  1. Open a macOS machine (Safari or Chrome)
  2. Navigate to Settings → Connectors (or any boot-layout settings page)
  3. Scroll aggressively past the top and bottom boundaries
  4. Verify: no elastic bounce / rubber-band effect occurs on the rounded canvas

Screenshots or screencast

Before

Screen.Recording.2026-05-22.at.22.19.35.mov

After

Screen.Recording.2026-05-22.at.22.18.57.mov

@himanshupathak95 himanshupathak95 marked this pull request as ready for review May 22, 2026 16:51
@github-actions
Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: maximebj <maximebj@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@himanshupathak95
Copy link
Copy Markdown
Contributor Author

This matches the approach taken here -

// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
// This allows us to disallow the scroll-chaining and rubber-banding that is currently
// is the cause of the issue outlined above.
// In other words, the following behavior doesn't yet work in Safari, but if/when
// it is added, it should take care of the issue.
// See also: https://drafts.csswg.org/css-overscroll/
overscroll-behavior-y: none;

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended OS Issues Issues or PRs that are related to OS specific problems Connectors screen Tracks connectors screen related tasks Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release labels May 23, 2026
@github-project-automation github-project-automation Bot moved this to 🔎 Needs Review in WordPress 7.0 Editor Tasks May 23, 2026
@t-hamano t-hamano moved this from 🔎 Needs Review to 🏗️ In Progress in WordPress 7.0 Editor Tasks May 23, 2026
@t-hamano t-hamano moved this from 🏗️ In Progress to 🔎 Needs Review in WordPress 7.0 Editor Tasks May 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release Connectors screen Tracks connectors screen related tasks OS Issues Issues or PRs that are related to OS specific problems [Type] Bug An existing feature does not function as intended

Projects

Status: 🔎 Needs Review

Development

Successfully merging this pull request may close these issues.

Scroll overflow issue on Mac in new settings pages

2 participants