Library: Browser scrollbar blinks at certain browser width

[t-hamano]

Description

Note: I have reproduced this problem on a Windows OS, not sure if it reproduces on a Mac OS. I would appreciate it if someone could test it.

On the Library page of the Site Editor, the browser scroll bar blinks at certain browser width. The problem appears to occur at the "break" between whether the scrollbar appears in the browser or not.

It occurs in Chrome and Edge, but does not appear to occur in Firefox.

Step-by-step reproduction instructions

• Go to the Library page of the Site Editor.
• Go to the Uncategorized category; there should be two patterns, Comments and Post Meta.
• Adjust the width of your browser and check for a blinking scrollbar point.

Screenshots, screen recording, code snippet

Chrome (Version 114.0.5735.199)

chrome.mp4

Edge (Version 114.0.1823.58)

edge.mp4

Firefox (Version 114.0.1)

firefox.mp4

Environment info

• WordPress Version: 6.3-alpha-56079
• Gutenberg Version: Latest trunk (16.1.0)
• OS: Windows 11

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

[firoz2456]

I can confirm that I am able to replicate this.

WordPress Version: 6.3-alpha-55909
Gutenberg Version: Latest trunk (16.1.0)
OS: macOS Ventura (M1 Pro)

Browser: Google Chrome

Screen.Recording.2023-07-03.at.8.16.46.PM.mov

Browser: Microsoft Edge Version 114.0.1823.67

Screen.Recording.2023-07-03.at.8.13.10.PM.mov

[bph]

Tested again this morning with WordPress 6.3 Beta 3 and couldn't replicate. Seems to be working without issues.

Blinker-Flicker-Browser.mp4

I tested it with and without Gutenberg plugin activated.

Browser versions

• Chrome 114.0.5735.198
• Firefox Developer Edition: 115.0b9 (64-bit
• Safari 16.4

[t-hamano]

@bph

Thanks for the testing. I have found myself submitting a similar problem in the past with #46793. This problem may only occur when the browser's scrollbars have a physical width. Perhaps on a Mac, you might be able to reproduce it by changing the scrollbars to always be visible.

[t-hamano]

@firoz2456

Your screencast appears to be testing another issue. If you would like, I would be happy to post again there if there is another issue you are trying to test.

[aaronrobertshaw]

I was able to replicate the blinking scrollbar on a Mac when setting scrollbars to always be visible.

My guess is the block preview component is where this originates. When inspecting it via dev tools, you can see the transform scale() and height styles alternating between values. The block preview adjusts based on a resize observer, so the appearance of the scrollbar may trigger that?

FWIW this seems like the definition of an edge case 🙃

@kevin940726 I believe you might have recently looked into the block previews, do you have any thoughts?