“Choose a pattern” modal twitchy rendering at certain sizes when scrollbars not overlaid

[stokesman]

Description

When prompted to choose a pattern if the window happens to be at size which is close to where the modal begins to have overflow then twitchy rendering will result. If the modal only contains a single pattern choice then the twitch will subside quite shortly. If the modal has two or more pattern choices then the twitch will never cease.

Step-by-step reproduction instructions

1. With your OS settings to show scrollbars
2. Create a new template in the Editor or a new Page from an admin screen
3. When prompted to “Choose a pattern” resize the window vertically near the point where there would be overflow
4. Note the twitch

If the modal only has a single pattern choice the twitch can’t be triggered by resizing after the modal is open but the range where it would happen can be found by noting when the scrollbar begins to show and hide (it’s like you can manually create the twitch by resizing back and forth through that range). Then if you leave the window at that size and go back to create the template again you can note the brief twitch right after the choose a pattern modal opens.

Screenshots, screen recording, code snippet

WP 6.5.2 in Chromium-based Vivaldi browser

twitchy-choose-a-pattern.mp4

WP 6.5.2 and Gutenberg 18.2.0 with WebKit-based Orion browser

webkit-twitchy-choose-a-pattern.mp4

Environment info

WP 6.5.2
Twenty Twenty-Four
with Gutenberg 18.2.0 or without
Browsers:

• Vivaldi (Chromium-based)
• Orion (WebKit-based)

macOS Version 13.6.6

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[stokesman]

This was also reported in #61613 where it was found to be happening on Windows.