Shaking effect from scrollbar appearing/disappearing when switching styles in some themes/browsers

[jeryj]

Description

Originally reported in trac by @kjnanda: https://core.trac.wordpress.org/ticket/60616

Debugged by @Rcreators:

As discussion on accessibility bug scrub today. We found the issue. When we change the style, page recalculate the hight and add scrollbar to it. For some styles, it gets removed and for some it removes but blank area stays. For reference check the this link: http://somup.com/cZeqoHC6mn The scrollbar needs to be removed for all the styles. https://core.trac.wordpress.org/ticket/60616#comment:6

Step-by-step reproduction instructions

• Activate Twenty Twenty Four
• Go to Appearance > Editor
• Click editor canvas
• Go to Styles button in header bar
• Click on Browse Style
• Select various styles
• Side scrollbar will appear and disappear on some styles

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[sabernhardt]

If it does not occur the first time you switch to a style, try resizing the browser window. It seems to flash at a viewport width where some text wraps on the next line with a scrollbar present but does not wrap when the preview lacks a scrollbar.

I was able to experience the scrollbar flashing with each of Twenty Twenty-Four's style options at various browser widths in Chrome and Edge on Windows 10. The video below records it in Edge, and I use the reduced motion setting (it occurs with animations on or off). https://github.com/WordPress/gutenberg/assets/17100257/c9ee1368-ec29-4fcd-b147-bb76c3416c24

The widths at which this video shows the flash are

• 1342px for Fossil and Maelstrom
• 1314px for Default, Onyx and Rust
• 1249px for Ember, Ice and Mint

The preview could always show the scrollbar instead of trying to remove it in all cases.