Work in progress.

packages/block-editor/src/components/block-list/style.scss

@@ -10,51 +10,60 @@
 
 // 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
+// selection marker with an entirely different model than Blink.
 .block-editor-block-list__layout {
 	position: relative;
 
-	// The primary indicator of selection in text is the native selection marker.
-	// When selecting multiple blocks, we provide an additional selection indicator.
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
-	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
-		// Everything else.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		border-radius: $radius-block-ui;
-
-		// Windows High Contrast mode will show this outline.
-		outline: 2px solid transparent;
+	// Hide selections on this element, otherwise Safari will include it stacked
+	// under your actual selection.
+	&::selection {
+		background: transparent;
+	}
 
-		// Animate the multi-selection style.
-		transition: box-shadow 0.1s linear;
-		@include reduce-motion("transition");
+	.has-multi-selection &::selection {
+		background: transparent;
+	}
 
-		// Show a lighter color for dark themes.
-		.is-dark-theme & {
-			box-shadow: 0 0 0 $border-width $dark-theme-focus;
+	// Block multi selection
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+		// Hide the native selection indicator.
+		&::selection {
+			background: transparent;
 		}
 
-		// Provide exceptions for placeholders.
-		.components-placeholder,
-		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-			::selection {
-				background: transparent;
-			}
+		// Draw a spot color overlay.
+		&::after {
+			content: "";
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+			top: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			left: $border-width;
+			background: var(--wp-admin-theme-color);
+			opacity: 0.4;
+
+			// Show outline in high contrast mode.
+			outline: 2px solid transparent;
 		}
 	}
 
-	// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
+	// Block focus and navigation mode.
+	.block-editor-block-list__block.is-highlighted,
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
+		// @todo, this might also need to be a pseudo element so it can overlay content.
 		border-radius: $radius-block-ui;
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Show outline in high contrast mode.
 		outline: 2px solid transparent;
 	}
 
+	// @todo, can this be combined with focus and navigation?
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
 
 		&::before {
@@ -115,15 +124,15 @@
 	}
 }
 
-// Apply `position: relative;` sparingly as it affects Safari selection rendering.
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block,
-.block-editor-block-list__layout .block-editor-block-list__block.has-block-overlay {
-	position: relative;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
-	// Without this, Safari draws a full-width selection rectangle.
+	// With static, Safari marks a full-width selection rectangle.
 	position: static;
+	// With relative, Safari marks an inline selection rectangle.
+	// This one matches that of Chrome, but it also does "crop" the marker,
+	// which can result in a small line from the preceeding paragraph.
+	// This line is effectively the above selection bleeding in.
+	position: relative;
+	// @todo: choose one of the two!
 
 	// Re-enable text-selection on editable blocks.
 	user-select: text;