diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 80794990713ff3..2c0c29752b5f41 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -32,6 +32,7 @@ $z-layers: (
 	".block-editor-url-input__suggestions": 30,
 	".edit-post-layout__footer": 30,
 	".interface-interface-skeleton__header": 30,
+	".interface-interface-skeleton__body": 20,
 	".edit-site-header": 62,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index ed5f3c5f8d7665..34514de96685b7 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -82,9 +82,13 @@ html.interface-interface-skeleton__html-container {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	// Beyond the medium breakpoint, we allow the sidebar.
 	// The sidebar should scroll independently, so enable scroll here also.
-
 	overflow: auto;
 
+	// On Safari iOS on smaller viewports lack of a z-index causes the background
+	// to "bleed" through the header.
+	// See https://github.com/WordPress/gutenberg/issues/32631
+	z-index: z-index(".interface-interface-skeleton__body");
+
 }
 
 .interface-interface-skeleton__secondary-sidebar,