rcfilters: Stop the "Live updates" button animation from affecting text rendering

Add 'z-index: 0' to introduce a stacking context. Stacking contexts
fix everything. Apparently.

In this case, this prevents browsers (tested with Chrome and Firefox)
from using grayscale text antialiasing instead of the usual subpixel
text antialiasing for the rest of the page; it is only used for this
button, which is acceptable.

(Firefox has some problems rendering the animation, but they already
existed before this patch.)

Bug: T181338
Change-Id: I059f819eb27b0f22fc2d09a2c61e5e65af878ed4

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
index 1db7c1d..f210a44 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
@@ -6,6 +6,8 @@
        &.oo-ui-toggleWidget-on {
                position: relative;
                overflow: hidden;
+               z-index: 0;
+
                &:after {
                        content: '';
                        mix-blend-mode: screen;