Zoom out can hide the scrollbar

[stokesman]

Description

Zooming out and then opening a sidebar hides the canvas scrollbar.

Ideally this shouldn’t happen but there’s a good reason it does. It’s a consequence of keeping the iframe’s width at that of the canvas document in order to have media queries be accurate. Were the scrollbar to be kept visible by having iframe‘s width fit its container then media queries would be off.

To illustrate, here I’ve highlighted the iframe so you can see most of its dimensions apart from the right side which is clipped:

---

Here’s an example of how keeping the scrollbar visible would cause breakpoint inaccuracies:

*1220px is what the document should be at. Right now, zoom out’s scaling is off (#65757).

---

One way around the issue is have zoom out narrow the document as its container narrows. The downside is that the width and layout will be narrower than when first zoomed out so it’s not the "full" view as seems to be the original intent of the feature. Though that’s already a bit of an issue. Since zoom out can now be engaged at any time, seeing the "full" view is dependent on zooming out before any sidebars open.

Another potential solution is scaling the iframe instead of its contained html element (#63390). Then there can’t be any media query discrepancy and the "full" view maintained. However, scaling the iframe also scales its scrollbar so the downside is a shrunken scrollbar.

There are a couple other potential solutions I have in mind though I may explore their feasibility a bit before writing about them.

Step-by-step reproduction instructions

1. Zoom out
2. Open a sidebar

Screenshots, screen recording, code snippet

No response

Environment info

Gutenberg trunk, all browsers

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