diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3e87ba317d135..d907ffd81d9dd 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -17,6 +17,20 @@
 	}
 }
 
+
+// Hide selections on this element, otherwise Safari will include it stacked
+// under your actual selection.
+// This uses a CSS hack to show the rules to Safari only. Failing here is okay,
+// it just makes the selection indication slightly less precise. That makes this
+// hack a progressive enhancement. Stylelint is disabled to allow the hack to work.
+/* stylelint-disable */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+	background-color: transparent; 
+}
+/* stylelint-enable */
+
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
 // Also be sure to test partial selections in Safari, as it draws the
@@ -24,16 +38,6 @@
 .block-editor-block-list__layout {
 	position: relative;
 
-	// Hide selections on this element, otherwise Safari will include it stacked
-	// under your actual selection.
-	&::selection {
-		background: transparent;
-	}
-
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
 	// Block multi selection
 	// Apply a rounded radius to the entire block when multi selected, but with low specificity
 	// so explicit radii set by tools are preserved.