Scaling not one to one when zooming out

[richtabor]

The blocks within the canvas are not quite scaling properly when zooming out.

Taking a look at the recording below, you'll see the space between the site title and the navigation does not maintain and text is reflowing in the columns below.

CleanShot.2024-09-30.at.13.08.19.mp4

[ndiego]

I can confirm, and this does appear in 6.7 nightly, so I am adding it to the board.

[getdave]

Related:

#64117
#61465
#63390

[talldan]

From what I can tell it's because of the border style here:

gutenberg/packages/block-editor/src/components/iframe/content.scss

Lines 41 to 43 in 8477a61

	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
	// layout, so we use border matching the background instead of margins.
	border: calc(#{$frame-size} / #{$scale}) solid $gray-300;

Here's a video of it being toggled on and off:

Kapture.2024-10-01.at.17.45.28.mp4

I haven't managed to work out a good alternative that retains the space around the canvas in the way the border does.

[richtabor]

// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome

Is this valid? There’s no other way around this?