| Bencemac | |
| Nov 25 2017, 2:48 PM |
| F11030018: image.png | |
| Nov 27 2017, 3:14 PM |
| F11030049: image.png | |
| Nov 27 2017, 3:14 PM |
| F11030013: image.png | |
| Nov 27 2017, 3:14 PM |
| F11030055: image.png | |
| Nov 27 2017, 3:14 PM |
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.
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.
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:
| Normal | Live updates |
 |  |
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?
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.
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
Change 436408 merged by jenkins-bot:
[mediawiki/core@master] rcfilters: Stop the "Live updates" button animation from affecting text rendering
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).