diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b17478ed24f040..e5bbf863757356 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -36,11 +36,6 @@
 	@include reduce-motion("animation");
 }
 
-@mixin editor-canvas-resize-animation() {
-	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
-	@include reduce-motion("transition");
-}
-
 // Deprecated
 @mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
 	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 9bad3ca22e95f7..0dad1cba38e135 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -66,7 +66,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			style={ { height, display: 'flex' } }
+			style={ { height, display: 'flex', justifyContent: 'center' } }
 		>
 			<Iframe
 				{ ...iframeProps }
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 1395b5c0a437d3..677e59bdf38735 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -1,8 +1,24 @@
 iframe[name="editor-canvas"] {
+	position: relative;
+	inset-block: 0;
+	flex: 0 0 auto;
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	display: block;
 	background-color: transparent;
-	@include editor-canvas-resize-animation;
+	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+	@include reduce-motion("transition");
+	transform-origin: 50% 0;
+}
+
+iframe[name="editor-canvas"].is-zoomed-out {
+	$max-width: 750px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
+	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
+	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
+	transform: scale(#{$scale});
+	flex-basis: calc((100% - #{$inset} * 2) / #{$scale});
+	height: calc(100% / #{$scale});
+	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
+	max-width: calc(#{$inset-max-width} / #{$scale});
 }
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 6a88813b0c6049..b70818e1ceca22 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -395,34 +395,36 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 
 .block-editor-block-list__zoom-out-separator {
-	/* same color as the iframe's background */
-	background: $gray-300;
-	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
-	margin-left: -1px;
-	margin-right: -1px;
-	transition: background-color 0.3s ease;
+	color: $black;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: $default-font-size;
 	font-family: $default-font;
-	color: $black;
 	font-weight: normal;
+	.has-global-padding > & {
+		margin: 0;
+	}
 
 	.is-zoomed-out & {
 		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
-	}
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 
-	&.is-dragged-over {
-		background: $gray-400;
-	}
-}
+		& > * {
+			position: relative; // Puts the label in front of the ::before pseudo element.
+		}
 
-// In Post Editor allow the separator to occupy the full width by ignoring (cancelling out) the global padding.
-.has-global-padding > .block-editor-block-list__zoom-out-separator,
-.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
-	max-width: none;
-	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
-	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+		&::before {
+			background: $gray-300; // same color as the iframe's background.
+			content: "";
+			transition: opacity 0.2s linear;
+			position: absolute;
+			inset: auto 0; // Horizontal edges to the full canvas width regardless of global padding.
+			height: inherit;
+		}
+
+		&.is-dragged-over::before {
+			opacity: 0.25;
+		}
+	}
 }
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index 9e0d087c2267cd..64ec3f2ec779b8 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -101,10 +101,11 @@ export function ZoomOutSeparator( {
 		<AnimatePresence>
 			{ isVisible && (
 				<motion.div
-					as="button"
 					layout={ ! isReducedMotion }
 					initial={ { height: 0 } }
-					animate={ { height: '120px' } }
+					animate={ {
+						height: 'calc(60px / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
 					exit={ { height: 0 } }
 					transition={ {
 						type: 'tween',
@@ -123,11 +124,20 @@ export function ZoomOutSeparator( {
 				>
 					<motion.div
 						initial={ { opacity: 0 } }
-						animate={ { opacity: 1 } }
+						animate={
+							isDraggedOver
+								? {
+										opacity: 0,
+										scale: isReducedMotion ? 1 : 0,
+										transition: { duration: 0.2, delay: 0 },
+								  }
+								: { opacity: 1 }
+						}
 						exit={ { opacity: 0 } }
 						transition={ {
 							type: 'tween',
 							duration: 0.1,
+							delay: 0.1,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 90b887993bf6db..5837e132daa73d 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -1,68 +1,31 @@
-.block-editor-iframe__body {
-	position: relative;
-}
-
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}
-
 .block-editor-iframe__html {
-	border: 0 solid $gray-300;
-	transform-origin: top center;
-	@include editor-canvas-resize-animation;
+	// Keeps body background styles from being clipped.
+	// See: https://github.com/WordPress/gutenberg/issues/44374#issuecomment-1260784743
+	height: auto;
+	// Keeps body background image from repeating.
+	// See: https://github.com/WordPress/gutenberg/issues/46782
+	min-height: 100%;
+	// Keeps the scrollbar gutter present to avoid a minor layout shift in case zoom out
+	// increases the height enough to remove overflow.
+	overflow-y: scroll;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
-	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
-	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
-
-	transform: scale(#{$scale});
-
-	background-color: $gray-300;
-
-	// 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;
-
-	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
-	// so we need to adjust the height of the content to match the scale by using negative margins.
-	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size});
-	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
-	margin-bottom: calc(-1 * #{$total-height});
-
-	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+	// Expands main content area.
+	// See: https://github.com/WordPress/gutenberg/pull/59512
+	&,
+	> body,
+	> body > .is-root-container:not(.wp-block-post-content) {
 		display: flex;
 		flex-direction: column;
+		flex: 1; // Doesn’t effect the html element but grouping is simpler this way.
+	}
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-
-			> main {
-				flex: 1;
-			}
-		}
+	> body > .is-root-container:not(.wp-block-post-content) > main {
+		flex: 1;
 	}
 }
+
+.block-editor-iframe__body {
+	position: relative;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3e022cf95ae556..276f4ca1de0bf9 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -39,15 +39,17 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	// Check if the event is a MouseEvent generated within the iframe.
-	// If so, adjust the coordinates to be relative to the position of
-	// the iframe. This ensures that components such as Draggable
-	// receive coordinates relative to the window, instead of relative
-	// to the iframe. Without this, the Draggable event handler would
-	// result in components "jumping" position as soon as the user
-	// drags over the iframe.
+	// Check if the event is a MouseEvent generated within the iframe. If so,
+	// adjust the coordinates by the iframe’s position and scale. This ensures
+	// that components such as Draggable receive coordinates relative to the
+	// window, instead of relative to the iframe. Without this, such component’s
+	// would have to deal with "jumps" in the coordinates whenever the pointer
+	// enters or exits the iframe.
 	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
+		const scale = rect.width / frame.offsetWidth;
+		init.clientX *= scale;
+		init.clientY *= scale;
 		init.clientX += rect.left;
 		init.clientY += rect.top;
 	}
@@ -101,6 +103,11 @@ function useBubbleEvents( iframeDocument ) {
 	} );
 }
 
+// The max-width for the iframe when zoomed out, though the frameSize is treated as within
+// so the actual width of the iframe will be less than this by the frameSize on each side.
+// This is also hardcoded in the styles so be sure to keep them in sync.
+const ZOOM_OUT_MAX_WIDTH = 750;
+
 function Iframe( {
 	contentRef,
 	children,
@@ -122,12 +129,9 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 
@@ -209,41 +213,12 @@ function Iframe( {
 		};
 	}, [] );
 
-	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
-
-	const iframeResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		const onResize = () => {
-			setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
-
-	const windowResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setWindowInnerWidth( nodeWindow.innerWidth );
-		const onResize = () => {
-			setWindowInnerWidth( nodeWindow.innerWidth );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
 	const isZoomedOut = scale !== 1;
+	const priorContainerWidth = useRef();
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+			priorContainerWidth.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -254,10 +229,6 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		// Avoid resize listeners when not needed, these will trigger
-		// unnecessary re-renders when animating the iframe width, or when
-		// expanding preview iframes.
-		isZoomedOut ? iframeResizeRef : null,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -268,19 +239,6 @@ function Iframe( {
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
-		<style>
-			html{
-				height: auto !important;
-				min-height: 100%;
-			}
-			/* Lowest specificity to not override global styles */
-			:where(body) {
-				margin: 0;
-				/* Default background color in case zoom out mode background
-				colors the html element */
-				background-color: white;
-			}
-		</style>
 		${ styles }
 		${ scripts }
 	</head>
@@ -302,85 +260,62 @@ function Iframe( {
 		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
-
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-
-		const maxWidth = 750;
-		iframeDocument.documentElement.style.setProperty(
+		const frameInlineWidth = frameSize * 2;
+		const nextWidth = containerWidth - frameInlineWidth;
+		const maxWidth = ZOOM_OUT_MAX_WIDTH - frameInlineWidth;
+		const nextScale =
+			Math.min( maxWidth, nextWidth ) / priorContainerWidth.current;
+		const { documentElement, defaultView } = iframeDocument;
+
+		documentElement.classList.add( 'is-zoomed-out' );
+		documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidthRef.current
-				: scale
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-frame-size',
-			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-content-height',
-			`${ contentHeight }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }px`
+			nextScale
 		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-container-width',
-			`${ containerWidth }px`
+		defaultView.frameElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scale',
+			Math.min( nextScale, 1 )
 		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
+		defaultView.frameElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-inset',
+			`${ frameSize }px`
 		);
 
 		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-
-			iframeDocument.documentElement.style.removeProperty(
+			documentElement.classList.remove( 'is-zoomed-out' );
+			documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
 			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-content-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-container-width'
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
 			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-inset'
 			);
 		};
-	}, [
-		scale,
-		frameSize,
-		iframeDocument,
-		iframeWindowInnerHeight,
-		contentHeight,
-		containerWidth,
-		windowInnerWidth,
-		isZoomedOut,
-	] );
+	}, [ containerWidth, frameSize, iframeDocument, isZoomedOut ] );
+
+	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
+		props.style || {};
+	// Omits inline margins for zoom out so static styles don’t need !important to override them.
+	const usedStyle = ! isZoomedOut ? props.style : styleWithoutInlineMargins;
 
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
 
-	const iframe = (
+	return (
 		<>
+			{ containerResizeListener }
 			{ shouldRenderFocusCaptureElements && before }
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
-				style={ {
-					...props.style,
-					height: props.style?.height,
-				} }
+				className={ clsx(
+					props.className,
+					isZoomedOut && 'is-zoomed-out'
+				) }
+				style={ { border: 0, ...usedStyle } }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
@@ -432,7 +367,6 @@ function Iframe( {
 								...bodyClasses
 							) }
 						>
-							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>
 								{ children }
 							</StyleProvider>
@@ -443,26 +377,6 @@ function Iframe( {
 			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
-
-	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
-			{ containerResizeListener }
-			<div
-				className={ clsx(
-					'block-editor-iframe__scale-container',
-					isZoomedOut && 'is-zoomed-out'
-				) }
-				style={ {
-					'--wp-block-editor-iframe-zoom-out-container-width':
-						isZoomedOut && `${ containerWidth }px`,
-					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidthRef.current }px`,
-				} }
-			>
-				{ iframe }
-			</div>
-		</div>
-	);
 }
 
 function IframeIfReady( props, ref ) {
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 88d2dac8ffd77c..b5aa3fed8d1a6a 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -341,7 +341,7 @@ function VisualEditor( {
 		isZoomedOut && ! isTabletViewport
 			? {
 					scale: 'default',
-					frameSize: '48px',
+					frameSize: 48,
 			  }
 			: {};
 
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index fb150daceadc9e..5a40af7ccf991a 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -5,10 +5,8 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 
 	@include break-medium() {
-		&:not(:has(.is-zoom-out)) {
-			position: initial;
-			width: initial;
-		}
+		position: initial;
+		width: initial;
 	}
 }