Zoom-out can trigger double scrollbars in the editor canvas.

[youknowriad]

Description

Double scrollbars are visible in the editor canvas when you scroll while zoom-out mode is active.

Step-by-step reproduction instructions

If you're on MacOS, make sure to have the "scrollbars always visible" setting active.

1- Enable the zoom-out mode experiment.
2- Go the site editor.
3- Edit the home page of 2024.
4- Trigger the zoom-out mode.
5- Notice that if you scroll in the canvas, you'll start seeing two scrollbars. And on Safari, they persist even after leaving zoom-out mode.

Screenshots, screen recording, code snippet

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

[mikachan]

I don't think this is related to zoom-out, or it's at least not only triggered by zoom-out mode, as I can reproduce this with the inserter as well:

The outer scrollbar is from a NavigableRegion with interface-interface-skeleton__content class. The inner scrollbar is from the editor canvas iframe. I would guess we want to prioritise the scrollbar from the iframe, as that should be the true height of the content we want to scroll.

[ntsekouras]

👋 - It would be great if you can test this PR to see if it fixes the issue you're mentioning here, because I couldn't reproduce your use case, but I've found a double scrollbar issue.. Thanks!