Page MenuHomePhabricator

Text rendering of the list on Special:RecentChanges changes from subpixel to greyscale when enabling "Live updates"
Closed, ResolvedPublic

Description

Something strange is happening with the style of the letters when I click on Edit Review Improvements beta gadget's "live updates" button in Recent Changes page. Please watch this video. To be honesty, I cannot put into words what is happening.

System: Win10 1709, Firefox 57.0 (with HTTPS Everywhere and Adblock Plus). It doesn't appear if I use Edge, so it's probably a Firefox-related problem.

Event Timeline

Bencemac created this task.Nov 25 2017, 2:48 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptNov 25 2017, 2:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I don't see anything strange with the style of letters in that video. Please explain what to look at, what you'd expect to happen, what happens instead. Thanks! :)

@Aklapper If you watch carefully, you can see that after the first click some letters become a little bit darker (?). Focus to “Taller” at 0:08. It's not because of the recording, it's that what I'm talking about. I know it's not a big deal, but honestly, I don't understand why is this happening.

Aklapper renamed this task from Style of letters behaves strangely to Style of letters behaves strangely (after the first click, some letters become a little bit darker?).Nov 25 2017, 9:15 PM

It's hard to tell with the video compression, but I suspect the text rendering mode is changing from subpixel to greyscale (or the other way around). https://en.wikipedia.org/wiki/Subpixel_rendering There are a few things that can cause the browser to decide to do that, including opacity animations.

I see this too on Chrome when enabling "Live updates" on https://en.wikipedia.org/wiki/Special:RecentChanges:

Zoomed in:

NormalLive updates
matmarex renamed this task from Style of letters behaves strangely (after the first click, some letters become a little bit darker?) to Text rendering of the list on Special:RecentChanges changes from subpixel to greyscale when enabling "Live updates".Nov 27 2017, 3:15 PM

So apparently this is caused by the pulsing animation on the "Live updates" button (.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-toggleWidget-on:after) – just removing that fixes the issue for me. This is actually insane in my opinion.

In Live Updates mode, when new results come in, they dissolve in from light color to full color over the course of a few seconds, in order to help users understand where the new results are. Is this the oddness you are trying to describe? Perhaps it is not working properly on your computer and looks odd?

We see some anomalies in Firefox, I suppose, but with very low impact on users. Perhaps a browser bug?

Majr added a subscriber: Majr.May 27 2018, 1:42 PM

The issue is the mix-blend-mode property used in the animation, which causes browsers to use the faster, but ugly, text rendering. The pulsing animation needs to be implemented without using mix-blend-mode (should be easily done with z-index) or removed. It's very low importance to have the animation, and is certainly not worth making the page unusable due to the headache inducing blurry text.

The issue is the mix-blend-mode property used in the animation, which causes browsers to use the faster, but ugly, text rendering. The pulsing animation needs to be implemented without using mix-blend-mode (should be easily done with z-index) or removed.

I tried doing this, and it was indeed easy, but it did not fix the issue – apparently animating the 'transform' property also causes this. Maybe we could get around that by animating 'width'/'height'/'top'/'left' instead, but that gets messy.

I think I found a different way to fix this though!

Change 436408 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] rcfilters: Stop the "Live updates" button animation from affecting text rendering

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

matmarex claimed this task.May 30 2018, 9:38 PM

Change 436408 merged by jenkins-bot:
[mediawiki/core@master] rcfilters: Stop the "Live updates" button animation from affecting text rendering

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

matmarex closed this task as Resolved.Jun 2 2018, 9:31 AM
matmarex removed a project: Patch-For-Review.

You can test the fix now on Beta Cluster: https://en.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges. Since the behavior can depend on your system, I would appreciate if other people affected by the issue could confirm that it no longer happens there (or reopen this task if it still does).

@matmarex Windows 10, Firefox 60.0.1: OK.