Text selection: show CSS hack to Safari only. (#57300)

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

@@ -17,23 +17,27 @@
  }
 }
 
+
+// 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
 // selection marker with an entirely different model than Blink.
 .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.