It is possible that T374180: Codex icons not loading on Vector 2022 via older versions of Chrome on Windows 7 is related and this is fixed?

T374180 fixed a typo in the -webkit-mask-image rule. With or without typo, this rule is overwritten by mask-image on the next line. This bug in this task was, and is still, reproducible in latest Firefox and Chrome, where Firefox has supported CSS mask-image since 2017 accoding to https://caniuse.com/mask-image.

We can see the webkit/old-Chrome rule being struck here with the standard mask-image correctly applying. The bug does not appear to be related to whether the mask is applied. It is being applied.

I experienced this problem too (e.g. with https://en.wikipedia.org/wiki/Estrel_Tower#/media/File:Außenansicht_Fassade_des_Estrel_Towers_Berlin.jpg, but the problem is also there for other pictures). There is a random element for the light mode (I never saw the problem in the dark mode): sometimes the correct icons are there (e.g. a gear symbol for "Enable or disable Media Viewer", sometimes they disappeay after a tiny moment so that white squares are displayed, sometimes there are white squares from the start.

I also played with the firefox debugger: The icons reappear if I deactive

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
background-color: var(--background-color-interactive-subtle,#f8f9fa);}

I noticed that because of https://phabricator.wikimedia.org/T369659 changes were made to mmv.ui.canvasButtons.js two month ago:
https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/ /1053722/5/resources/mmv/ui/mmv.ui.canvasButtons.js
@Ebrahim: Do you think that there could be a connection to the problem with "strange white squares" in this thread?

I can't seem to replicate this. This might have related to some recent changes in Codex. Can we confirm if it's been fixed?

I still observe the problem (tested on Firefox, Chrome and Edge). There is a random component, so pages should be reloaded several times for testing. In an incognito window the problem is typically not there for the first loading of the page, but after reloading the page the problem appears.

@Ebrahim: Do you think that there could be a connection to the problem with "strange white squares" in this thread?

Sorry for the late response, I don't know to be honest, I was there to fix its issues with RTL as the solution was to add a dedicated element as @TheDJ's recommendation so I think @TheDJ is more familiar with the code there.

Can't replicate this on either Firefox or Chrome. It sounds like it is a race condition of some sort ?

Hmm. it has to do something with one of the pseudo states I think and the order in which the style overrides apply.

For clarity: Here is an image of the problem I see for this example https://de.wikipedia.org/wiki/Wikipedia:Hauptseite#/media/Datei:Hussitenführer_Jan_Zizka.jpg:

Okay I managed to replicate this on https://de.wikipedia.org/wiki/Wikipedia:Hauptseite#/media/Datei:Hussitenführer_Jan_Zizka.jpg in the incognito window by refreshing the page a few times think this a load order problem.
@egardner it seems that the rule:

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {   background-color: var(--background-color-interactive-subtle, #f8f9fa); }

is overriding the rule

.cdx-button.mw-mmv-button {
    background-color: #20212274;
}

What is the best way to override a button color? Should the MMV selector be increased in specificity to:

.cdx-button.mw-mmv-button.cdx-button--fake-button--enabled

or use !important ?

@Jdlrobson this is a strange bug. I was also able to reproduce it locally, but only once. I can't trigger it consistently.

If anyone has steps for how to consistently reproduce this, that would be helpful.

Change #1081469 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/MultimediaViewer@master] Increase specificity to avoid rare white boxes

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

I also am getting it here https://en.wikipedia.org/wiki/Cameroon#/media/File:Paul_Biya_with_Obamas_2014.jpg after some tries now. I see what @Jdlrobson also have described, .cdx-button.mw-mmv-button is not enough to always win over either of .cdx-button:enabled and .cdx-button.cdx-button--fake-button--enabled so I felt the lower risk and future proof solution can be to increase the specificity only by repeating .mw-mmv-button again. I first went with just adding :enabled but that alone wasn't enough and cdx-button--fake-button--enabled also needed to be on some of the buttons that's why I thought just repeating .mw-mmv-button can be a lower risk solution here.

Change #1081469 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Increase specificity to avoid rare white boxes

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

Test Result - Beta|Prod

Status: ✅ PASS
Environment: beta/PROD
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA

Test Artifact(s):
Beta- https://en.wikipedia.beta.wmflabs.org/wiki/Bear#/media/File:Teufelshöhle-Höhlenbär-Dreiviertelprofil.jpg

PROD- https://en.wikipedia.org/wiki/Cameroon#/media/File:Paul_Biya_with_Obamas_2014.jpg
https://en.wikipedia.org/wiki/Cameroon?useskin=vector#/media/File:Paul_Biya_2014.png

Test Steps

Test Case 1: Ensure Correct Icon Display in MediaViewer via Permalink

1. Open the link: https://en.wikipedia.org/wiki/Cameroon?useskin=vector#/media/File:Paul_Biya_with_Obamas_2014.jpg
2. Observe the icons in the MediaViewer for the linked image.
3. ✅AC1: Confirm that the icons are displayed correctly and are not replaced by white squares.

Beta	Prod 1	Prod 2