Text selection: show CSS hack to Safari only. #57300
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Dec 21, 2023
|
Size Change: +56 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
ellatrix
reviewed
Dec 21, 2023
| // Hide selections on this element, otherwise Safari will include it stacked | ||
| // under your actual selection. | ||
| &::selection { | ||
| background: transparent; |
There was a problem hiding this comment.
Re-enabling this doesn't work in Chrome?
There was a problem hiding this comment.
Sorry can you clarify?
|
What does text selection look like on the front-end in Safari? Also, do we know what is causing this weird selection? |
Looks like this:
However that's still not accurate to any of the selections inside the editor.
Yes, there's more detail in #44148, specifically here, but the gist is that every single element that exists is highlighted in Safari, including all the extra cruft we have in the editor, such as pseudo elements, added div wrappers and containers, every single fragment, etc. So unless we could have identical markup in editor and frontend, there will always be a difference between editor and frontend selection style in Safari. |
scruffian
approved these changes
Dec 21, 2023
|
I'll let this sit for a bit more to collect feedback, but others should feel free to press the green button here as well. |
mikachan
added
the
Backport to WP Minor Release
mikachan
approved these changes
Dec 21, 2023
There was a problem hiding this comment.
I've tested this out and it looks like it's working well for me:
- I can replicate the issues in Chrome Canary and Safari without this PR ✅
- Chrome base behaviour is consistent between trunk and this PR ✅
- Safari works well with this PR ✅
I tested using TT4 with multiple paragraph blocks and with columns with nested images and paragraph blocks.
|
I just cherry-picked this PR to the 6.4/latest-fixes branch to get it included in the next release: daa20d4 |
mikachan
removed
the
Backport to WP Minor Release
ciampo
added
[Package] Block editor
mikachan
pushed a commit
that referenced
this pull request
Jan 5, 2024
This was referenced Jan 5, 2024
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jan 9, 2024
Package Update includes fixes for: - Image Block: Enable image block to be selected correctly when clicked. - Reduce specificity of default Cover text color styles. - Image Block: Fix deprecation when width/height attribute is number. - Text selection: show CSS hack to Safari only. - SlotFill: Allow contextual SlotFillProviders. See: #5696 See: WordPress/gutenberg@bd6767b See: WordPress/gutenberg#56043 See: WordPress/gutenberg#56411 See: WordPress/gutenberg#57063 See: WordPress/gutenberg#57300 See: WordPress/gutenberg#56779 Props mikachan, wildworks, alexstine, poena, isabel_brison, andrewserong, czapla, andraganescu, joen, ellatrix, youknowriad, ntsekouras. Fixes #59943, #59943. git-svn-id: https://develop.svn.wordpress.org/trunk@57258 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jan 9, 2024
Package Update includes fixes for: - Image Block: Enable image block to be selected correctly when clicked. - Reduce specificity of default Cover text color styles. - Image Block: Fix deprecation when width/height attribute is number. - Text selection: show CSS hack to Safari only. - SlotFill: Allow contextual SlotFillProviders. See: WordPress/wordpress-develop#5696 See: WordPress/gutenberg@bd6767b See: WordPress/gutenberg#56043 See: WordPress/gutenberg#56411 See: WordPress/gutenberg#57063 See: WordPress/gutenberg#57300 See: WordPress/gutenberg#56779 Props mikachan, wildworks, alexstine, poena, isabel_brison, andrewserong, czapla, andraganescu, joen, ellatrix, youknowriad, ntsekouras. Fixes #59943, #59943. Built from https://develop.svn.wordpress.org/trunk@57258 git-svn-id: http://core.svn.wordpress.org/trunk@56764 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Jan 9, 2024
Package Update includes fixes for: - Image Block: Enable image block to be selected correctly when clicked. - Reduce specificity of default Cover text color styles. - Image Block: Fix deprecation when width/height attribute is number. - Text selection: show CSS hack to Safari only. - SlotFill: Allow contextual SlotFillProviders. See: WordPress/wordpress-develop#5696 See: WordPress/gutenberg@bd6767b See: WordPress/gutenberg#56043 See: WordPress/gutenberg#56411 See: WordPress/gutenberg#57063 See: WordPress/gutenberg#57300 See: WordPress/gutenberg#56779 Props mikachan, wildworks, alexstine, poena, isabel_brison, andrewserong, czapla, andraganescu, joen, ellatrix, youknowriad, ntsekouras. Fixes #59943, #59943. Built from https://develop.svn.wordpress.org/trunk@57258 git-svn-id: https://core.svn.wordpress.org/trunk@56764 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Alternative to #57298, fixes #56408.
There's a CSS hack that exists for making the selection style in Safari more precise. This hack has side effects in Chrome Canary, and this PR fixes that by showing the Safari hack to Safari only.
Hacks are bad, but this hack, should it fail, it would fail only in Safari, and the result would be the same as removing the hack, so the selection would still show, it would just show as the "before" image, as shown below.
Chrome base, before:
Chrome Canary before:
Safari before:
Safari with the hack plainly removed (without the hack that makes the selection precise, note how the selection goes edge to edge between blocks):
After this PR, Chrome base:
After, Chrome Canary:
After, Safari with debugging colors to test the hack in this PR:
After, Safari with the transparent color:
Testing Instructions
Please test first, selecting across multiple paragraphs, then multiple non-text paragraphs, be sure to also test nested blocks.
Test in Chrome, Chrome Canary, Safari. The selection style should look the same across all three.