Skip to content

Commit

Permalink
Text selection: show CSS hack to Safari only.
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmussen committed Dec 21, 2023
1 parent bf87c21 commit 26d29e8
Showing 1 changed file with 14 additions and 10 deletions.
24 changes: 14 additions & 10 deletions packages/block-editor/src/components/block-list/content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 26d29e8

Please sign in to comment.