Page MenuHomePhabricator

Use CSS 'mix-blend-mode: multiply' for fake selections
Open, Needs TriagePublic

Description

This makes the selections look like they are under the text instead of over it, like real selections.

See https://gerrit.wikimedia.org/r/c/mediawiki/extensions/DiscussionTools/+/644370/2/modules/dt.init.less for an example.

Testing

  • Select some text, then open a dropdown menu (e.g. text styling) to trigger a fake selection
  • Observe that the selected text becomes slightly paler as the blue highlight is drawn on top of it:
  • Expect that the selected text does not change colour:

Event Timeline

Esanders created this task.Dec 1 2020, 3:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 1 2020, 3:37 PM

Browsers will make text appear above selections but not images:

So we should not use this technique for non text highlights, e.g. FocusableNodes

ppelberg moved this task from To Triage to Triaged on the VisualEditor board.Dec 1 2020, 4:09 PM

Change 644554 had a related patch set uploaded (by Esanders; owner: Esanders):
[VisualEditor/VisualEditor@master] Use CSS 'mix-blend-mode: multiply' for fake selections

https://gerrit.wikimedia.org/r/644554

Esanders updated the task description. (Show Details)Dec 1 2020, 4:19 PM

Some caveats that might matter here (but didn't in DiscussionTools, where this is just a one-second flash):

  • I haven't really thought about how it interacts with colored text, backgrounds or images, but it will probably look weird
  • At least on Windows, using it disables subpixel antialiasing, making text look blurrier on non-hidpi displays
Before (subpixel antialiasing; no mix-blend-mode: multiply, only a transparent overlay on the selection)
After (no subpixel antialiasing, only greyscale; mix-blend-mode: multiply on the selection)

Zoomed in:

Esanders added a comment.EditedDec 9 2020, 1:15 PM

We use GPU mode in a few places, e.g. all dialogs, so I'm not concerned about greyscale anti-aliasing.

Coloured text is not the same as native, but looks fine and no worse than before:

BaseNativeBeforeAfter

Inline images also look reasonable:

Test wiki created on Patch Demo by ESanders (WMF) using patch(es) linked to this task:

http://patchdemo.wmflabs.org/wikis/11875e139d3e0538ae41889aa64944c4/w/

Test wiki created on Patch Demo by ESanders (WMF) using patch(es) linked to this task:

http://patchdemo.wmflabs.org/wikis/59c1af48ad8219ea47c4a35554c26835/w/

I think the changes to text rendering I mentioned earlier make this a change for the worse (at least on Windows, using mix-blend-mode disables subpixel antialiasing, making text look blurrier on non-hidpi displays).

I feel that the text looks a lot worse after this change. It's impossible to show it in a screenshot (as the result you'll see will depend on your screen), so I tried to take some photos of my external display. This still doesn't really show how it looks like on the actual display, but hopefully it shows what I mean.

Before the patchAfter the patch
Screenshot
Photo

(Forgive the skewed photos, I don't have a tripod or anything to keep the camera (phone) in place, so I stacked some boxes and stuff. The red tint is because the display's color temperature is adjusted for the evening.)

We could do some more work to limit the impact, e.g. only apply mix-blend-mode while a fake selection is shown, but that will probably look even more distracting if the whole screen "shimmers" when you open a menu (one of the things that uses fake selections).

(For context, the idea came out of rEDTOb92ae47e005b: Tweak colors and timing of the highlight on posted comments, where we used mix-blend-mode to display the new comment highlight in DiscussionTools. It has the same negative effects on text rendering of the entire page there, but it only happens after posting a comment, and only for about a second until the highlight fades out.)

Esanders added a comment.EditedThu, Jan 21, 11:33 AM

For me, the anti-aliasing only changes when a fake selection is in use. I think the change is very subtle, and I only notice it when I’m looking out for it.

Note also that we use GPU rendering in other places, e.g. all OOUI dialogs, and have no one has ever noticed it.