Global Styles: The preview of the image block trembles

[t-hamano]

Description

In the global style block preview, when I select an image block, the preview area does not display properly.
Scroll bars appear and disappear, and the preview area trembles.

This issue occurs when the preview is displayed for the first time with the browser's developer tools displayed.

f4c304910ea1ccf58f838b9d0695db99.mp4

When this issue occurs, the display area style calculation appears to be looping:

0120f9e8f09bd3193497928d1d419ed4.mp4

Perhaps this problem only occurs in Windows. Because I believe that Windows scrollbars reserve width, which may affect the calculation of the style.

Environment info

• Gutenberg version: 14.9.0
• OS: Windows 11
• Browser: Chrome

[annezazu]

@t-hamano I'm not able to replicate this with GB 14.8.4. Can you share what version of GB you're using and what browser?

[t-hamano]

@annezazu
Sorry for the lack of information.

This problem should only occur with the Chrome browser on Windows OS. I suspect that the size of the preview area is not calculated correctly because of the physical width of the scrollbar. MacOS or FireFox browsers may not have this problem, since the scrollbars are floating.

[annezazu]

Thank you! @madhusudhand can you follow up here?

[madhusudhand]

Update: I verified the component on Mac, Chrome by switching scrollbar from floating to always to simulate the above conditions. I could not replicate the issue.

I will have to make a test on Windows env.

[t-hamano]

I have confirmed that this problem also occurs with Latest Comments blocks. As shown below, you can see that the rendering of the block is repeated at a high speed.

00e3bb09257c004897515eb7dec0fd73.mp4

My guess is that in the case of blocks containing media or dynamic blocks, this is caused by the following process looping if the content takes a bit time to render:

• Immediately after the preview is rendered, media or dynamic blocks aren't displayed yet.
• The preview area has no scrollbars and useResizeObserver() detects its width
• Media and dynamic blocks are rendered and content overflows vertically
• Vertical scroll bar appears
• In the Windows and Chrome combination, the scrollbars have a physical width, which changes the width of the preview area
• Preview re-renders the block due to the change in width.

[madhusudhand]

@t-hamano #47697 fixes this. Can you verify the issue with this change and provide feedback.