Description

When using the site editor, you will occasionally see a double scrollbar. The scrollbar appears to be caused by the sibling inserter being positioned outside of the iframe, but below the content:

Step-by-step reproduction instructions

Preriquisites:

• Make sure you do not have auto-hiding scrollbars in MacOS
• Use a block theme, such as TT1 Blocks
• Open the web-inspector so it's ready to go

Steps to reproduce:

• Go to the site editor, and while the template is still loading, hover the content to try and invoke the sibling inserter
• If you're successful, the sibling inserter will be positioned incorrectly, due to being positioned according to content still loading.

Note: If you mange to reproduce, be careful to not invoke the sibling inserter again, or the scrollbar will disappear. One thing that might help: as soon as you reproduce the double scrollbar, move the mouse to the inspector, then open the JS console and paste: setTimeout(function(){debugger;}, 2000);, then wait two seconds. This will lock the content, so you can now scroll down to see the sibling inserter sitting in a gray area outside the content.

Expected behaviour

Only ever a single scrollbar, that of the iframe.

Screenshots or screen recording (optional)

It's super fiddly to get this right, but if you use MacOS auto hiding scrollbars, you'll never see this. So you have to turn that off first.

Code snippet (optional)

One potential fix is to change the CSS as shown in the GIF above, to specifically set overflow: hidden; on .interface-interface-skeleton__content. But because content is placed in the popover container outside the iframe, I'm not convinced that this will actually fix it.