Page MenuHomePhabricator

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

Assigned To
Authored By
Dec 1 2020, 3:37 PM
Referenced Files
F34009856: image.png
Jan 20 2021, 10:48 PM
F34009854: image.png
Jan 20 2021, 10:48 PM
F34009849: 9D563EED-9684-45FD-9339-414B09F0E0EDab.jpeg
Jan 20 2021, 10:48 PM
F34009850: 0072716A-8E2F-4E06-8572-7EDE888A1C43ab.jpeg
Jan 20 2021, 10:48 PM
F33940805: image.png
Dec 9 2020, 1:17 PM
F33940796: image.png
Dec 9 2020, 1:15 PM
F33940798: image.png
Dec 9 2020, 1:15 PM
F33940800: image.png
Dec 9 2020, 1:15 PM


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

See for an example.


  • 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:
    image.png (34×167 px, 2 KB)
  • Expect that the selected text does not change colour:
    image.png (30×162 px, 2 KB)

Event Timeline

Browsers will make text appear above selections but not images:

image.png (44×159 px, 2 KB)

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

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

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)
image.png (59×409 px, 5 KB)
After (no subpixel antialiasing, only greyscale; mix-blend-mode: multiply on the selection)
image.png (59×409 px, 5 KB)

Zoomed in:

image.png (1×3 px, 242 KB)

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:

image.png (26×121 px, 1 KB)
image.png (29×126 px, 1 KB)
image.png (29×123 px, 1 KB)
image.png (29×120 px, 1 KB)

Inline images also look reasonable:

image.png (308×324 px, 27 KB)

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
image.png (332×444 px, 24 KB)
image.png (332×444 px, 23 KB)
9D563EED-9684-45FD-9339-414B09F0E0EDab.jpeg (2×3 px, 3 MB)
0072716A-8E2F-4E06-8572-7EDE888A1C43ab.jpeg (2×3 px, 3 MB)

(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.)

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.