Skip to content

Text Selection in Safari: Try new fix for recent version #44148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasmussen merged 3 commits into from
Sep 16, 2022
Merged

Text Selection in Safari: Try new fix for recent version #44148

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e726a66
Text Selection in Safari: Try new fix for recent version
jasmussen Sep 14, 2022
4b5fbf8
Fix issue.
jasmussen Sep 14, 2022
e3cd560
Better fix.
jasmussen Sep 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
.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;
}

// 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),
Expand Down Expand Up @@ -51,6 +57,11 @@
}
}

// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
.has-multi-selection &::selection {
background: transparent;
}

.block-editor-block-list__block.is-highlighted::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: $border-width solid transparent;
Expand Down Expand Up @@ -128,14 +139,22 @@
// Re-enable text-selection on editable blocks.
user-select: text;

// Hide the select style pseudo element as it interferes with the style.
// Hide the select style pseudo element as otherwise it gets shwon as "selected" in Safari.
&.is-partially-selected::after {
height: 0;
// By positioning this pseudo element outside the boundaries of the parent block,
// when partially selected it hides the pseudo element selection in Safari.
top: -0.5px;
right: -0.5px;
bottom: -0.5px;
left: -0.5px;
}

&.is-highlighted::after,
&.is-highlighted ~ .is-multi-selected::after {
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

// Break long strings of text without spaces so they don't overflow the block.
Expand Down