diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 0b37b4dd1447e2..8f6064de0b615c 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -3,7 +3,7 @@ iframe[name="editor-canvas"] {
 	width: 100%;
 	height: 100%;
 	display: block;
-	background-color: transparent;
 	// Handles transitions between device previews
 	@include editor-canvas-resize-animation;
+	background-color: $gray-300;
 }
diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
index 0bdbc2bbe32355..52ac29da0696f6 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -1,6 +1,5 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
-	background-color: $gray-300;
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index fae61eda6b8013..63df28f0f1ba5a 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -1,8 +1,19 @@
 .editor-visual-editor {
 	position: relative;
 	display: flex;
+
+	// This duplicates the iframe background but it's necessary in some situations
+	// when the iframe doesn't cover the whole canvas
+	// like the "focused entities".
 	background-color: $gray-300;
 
+	// This overrides the iframe background since it's applied again here
+	// It also prevents some style glitches if `editor-visual-editor`
+	// like when hovering the preview in the site editor.
+	iframe[name="editor-canvas"] {
+		background-color: transparent;
+	}
+
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
diff --git a/storybook/stories/playground/zoom-out/index.js b/storybook/stories/playground/zoom-out/index.js
index 4f2efcf48523e8..8b72a831d710e8 100644
--- a/storybook/stories/playground/zoom-out/index.js
+++ b/storybook/stories/playground/zoom-out/index.js
@@ -50,7 +50,7 @@ export default function EditorZoomOut( { zoomLevel } ) {
 		<div
 			className="editor-zoom-out"
 			onKeyDown={ ( event ) => event.stopPropagation() }
-			style={ { background: '#ddd', border: '1px solid gray' } }
+			style={ { border: '1px solid gray' } }
 		>
 			<BlockEditorProvider
 				value={ blocks }