Page MenuHomePhabricator

Vector 2022 body text doesn't use subpixel rendering when TOC is pinned on Chromium
Closed, ResolvedPublic

Assigned To
Authored By
matmarex
Jan 20 2023, 1:42 AM
Referenced Files
F36455410: after.png
Jan 23 2023, 7:17 PM
F36455409: before.png
Jan 23 2023, 7:17 PM
F36428640: new-resize-channel-combined.png
Jan 23 2023, 11:57 AM
F36428642: old-resize-channel-combined.png
Jan 23 2023, 11:57 AM
F36340225: new-zoomed.png
Jan 20 2023, 1:42 AM
F36340223: old-zoomed.png
Jan 20 2023, 1:42 AM
F36340221: new.png
Jan 20 2023, 1:42 AM
F36340219: old.png
Jan 20 2023, 1:42 AM
Tokens
"Orange Medal" token, awarded by Krinkle.

Description

Vector 2022 body text doesn't use subpixel rendering, at least on Windows. This makes it look look less crisp / more blurry on standard DPI screens. Someone has even complained that the text is "too faded", and I think this is why: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Vector_2022_text_is_too_light

Many CSS properties disable it as a side-effect, including 'animation' and 'opacity' (even when there's no animation and 100% opacity – just using the property causes this). I haven't figured out what is causing it in Vector.

This is my pet peeve, and I complained about this problem before in various products: T146339 T179988 T269145#6661061 (some of those reports may have better explanations).

Screenshots:

Old VectorNew Vector
old.png (1×1 px, 533 KB)
new.png (1×1 px, 649 KB)

If you aren't familiar with this technique: subpixel rendering produces an effect on your screen that looks kind of like this, with crisper, narrower lines at the expense of some color fringing:

Old Vector
old-resize-channel-combined.png (90×768 px, 1 KB)
New Vector
new-resize-channel-combined.png (90×768 px, 1 KB)

(It looks better in practice than in my illustration here, I'm not sure how to accurately reproduce it.)

Event Timeline

I found the cause (by deleting elements from the page one by one until the problem disappeared) – it's the table of contents :/ Removing position: sticky; on #vector-toc-pinned-container causes the issue to disappear. Obviously that's not a viable solution, though.

I think there's a good chance that fixing this will also fix T322978, since that issue (according to discussion in the Chromium issue linked there) is also related to subpixel rendering.

matmarex renamed this task from Vector 2022 body text doesn't use subpixel rendering to Vector 2022 body text doesn't use subpixel rendering when TOC is pinned on Chromium.Jan 20 2023, 3:05 AM

Change 881744 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Work around sticky-positioned layers disabling subpixel rendering

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

I took a video to show the difference before/after @matmarex patch: https://app.screencast.com/AYE5kWYsvtuBu

Also, took these screenshots:

Before:

before.png (1×3 px, 2 MB)

After::

after.png (1×3 px, 2 MB)

The difference is fairly subtle, but I do notice that the "after" has crisper/darker text

I took a video to show the difference before/after @Batorsz's patch: https://app.screencast.com/AYE5kWYsvtuBu

Hey, this was fixed by @matmarex, not by me. But this is a really nice update, I love smooth fonts. Congrats! :D

Sorry for the spam! Corrected this in my previous post

Change 882727 had a related patch set uploaded (by Nray; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@wmf/1.40.0-wmf.19] Work around sticky-positioned layers disabling subpixel rendering

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

Change 881744 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Work around sticky-positioned layers disabling subpixel rendering

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

Change 882727 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.19] Work around sticky-positioned layers disabling subpixel rendering

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

Mentioned in SAL (#wikimedia-operations) [2023-01-24T21:43:14Z] <samtar@deploy1002> Started scap: Backport for [[gerrit:882727|Work around sticky-positioned layers disabling subpixel rendering (T327460)]]

Mentioned in SAL (#wikimedia-operations) [2023-01-24T21:45:00Z] <samtar@deploy1002> nray and samtar: Backport for [[gerrit:882727|Work around sticky-positioned layers disabling subpixel rendering (T327460)]] synced to the testservers: mwdebug1001.eqiad.wmnet, mwdebug2001.codfw.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2023-01-24T21:56:45Z] <samtar@deploy1002> Finished scap: Backport for [[gerrit:882727|Work around sticky-positioned layers disabling subpixel rendering (T327460)]] (duration: 13m 31s)

Edtadros subscribed.