[Image Browsing] transparent background images
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	SherryYang-WMF
	Jun 12 2026, 6:47 PM

Project Tags

Referenced Files

	F89135950: Screenshot 2026-06-17 at 11.29.39 AM.png
	Wed, Jun 17, 3:41 PM

	F89125358: File.png
	Wed, Jun 17, 2:13 PM

	F88685337: Carousel transparent image dark mode with checkered bg.png
	Jun 15 2026, 6:16 PM

	F88685220: Carousel transparent image light mode with checkered bg.png
	Jun 15 2026, 6:12 PM

	F88683630: Carousel transparent image dark mode.png
	Jun 15 2026, 6:03 PM

	F88683592: Carousel transparent image light mode.png
	Jun 15 2026, 6:03 PM

Subscribers

Description

Repro: open image with transparent background with ?mmvBeta=1 param

Expected: checkered background underlay helps with image visibility, e.g.,
https://en.wikipedia.org/wiki/Zaragoza_Airport#/media/File%3AAena_Zaragoza.svg

Actual: the transparency on the viewer's dark background makes the graphic illegible, e.g., https://en.wikipedia.org/wiki/Zaragoza_Airport?mmvBeta=1#/media/File%3AAena_Zaragoza.svg

Bonus bug: transparent images in the carousel are difficult to see when dark mode is enabled. More details: T429047#12029580

Details

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Image Browsing: use darkmode-override mixin for carousel images	Eric Gardner	mediawiki/extensions/MultimediaViewer	master	+4 -12
Image Browsing: fix transparent images in carousel	Eric Gardner	mediawiki/extensions/MultimediaViewer	wmf/1.47.0-wmf.7	+21 -6
Image Browsing: fix transparent images in carousel	Eric Gardner	mediawiki/extensions/MultimediaViewer	wmf/1.47.0-wmf.6	+21 -6
Image Browsing: fix transparent images in carousel	LWatson	mediawiki/extensions/MultimediaViewer	master	+21 -6
Add checkboard background for transparent images	Matthias Mullie	mediawiki/extensions/MultimediaViewer	master	+13 -0

Customize query in gerrit

Related Objects

Mentioned In: T429193: Pagination lags or skips because of large images
Mentioned Here: T429193: Pagination lags or skips because of large images
T429500: Transparent infobox images are not visible in dark mode

Event Timeline

SherryYang-WMF created this task.Jun 12 2026, 6:47 PM

Restricted Application added a subscriber: • Aklapper. · View Herald TranscriptJun 12 2026, 6:47 PM

SherryYang-WMF triaged this task as High priority.Jun 12 2026, 6:47 PM

SherryYang-WMF added a project: ReaderExperiments-ImageBrowsing.

@SherryYang-WMF: Assuming this task is about the MediaViewer codebase, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects or looking at workboards. Please set appropriate project tags when possible. Thanks!

matthiasmullie claimed this task.Jun 15 2026, 9:17 AM

matthiasmullie moved this task from Committed to Doing on the Reader Growth Team (Sprint 6 (Jun 10 - 30) Q4 25/26) board.

Change #1302097 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/MultimediaViewer@master] Add checkboard background for transparent images

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

gerritbot added a project: Patch-For-Review.Jun 15 2026, 9:31 AM

matthiasmullie moved this task from Doing to Code Review on the Reader Growth Team (Sprint 6 (Jun 10 - 30) Q4 25/26) board.Jun 15 2026, 9:32 AM

matthiasmullie set the point value for this task to 1.

lwatson renamed this task from [Image Browsing] transparent backgrounds on dark mode to [Image Browsing] transparent background images.Jun 15 2026, 1:54 PM

lwatson updated the task description. (Show Details)

Updated the task description because the transparent images in the viewer are not related to dark mode, instead the media viewer has a consistent dark background in any mode.

Dark mode does pose a problem for transparent images in the carousel. Do we want to apply the same checkered background to transparent images in the carousel?

light mode	dark mode

Demo with a checkered background:

Carousel transparent image light mode with checkered bg.png (640×1,140 px, 320 KB)

Carousel transparent image dark mode with checkered bg.png (638×1,138 px, 322 KB)

lwatson attached a referenced file: F88685337: Carousel transparent image dark mode with checkered bg.png. (Show Details)Jun 15 2026, 6:16 PM

lwatson attached a referenced file: F88685220: Carousel transparent image light mode with checkered bg.png. (Show Details)

Change #1302097 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Add checkboard background for transparent images

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

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16).Jun 15 2026, 8:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jun 15 2026, 8:32 PM

lwatson moved this task from Code Review to QA on the Reader Growth Team (Sprint 6 (Jun 10 - 30) Q4 25/26) board.Jun 15 2026, 8:54 PM

In T429047#12020851, @lwatson wrote:

Updated the task description because the transparent images in the viewer are not related to dark mode, instead the media viewer has a consistent dark background in any mode.

Dark mode does pose a problem for transparent images in the carousel. Do we want to apply the same checkered background to transparent images in the carousel?

light mode dark mode

Demo with a checkered background:

CC @JScherer-WMF to answer above question

In T429047#12020851, @lwatson wrote:

Updated the task description because the transparent images in the viewer are not related to dark mode, instead the media viewer has a consistent dark background in any mode.

Dark mode does pose a problem for transparent images in the carousel. Do we want to apply the same checkered background to transparent images in the carousel?

light mode dark mode

Demo with a checkered background:

Thanks for reminding me! I reached out to Justin. Here's the update:
Follow the same rules adopted for dark mode. Apply a light colored background (background-color-base-fixed) to images when dark mode is enabled.
Enable dark mode on the "0" article https://en.wikipedia.org/wiki/0 to view an example.

I'll submit a patch @matthiasmullie

Change #1303452 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: fix transparent images in carousel

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

gerritbot added a project: Patch-For-Review.Wed, Jun 17, 2:35 PM

Checked on enwiki wmf. 6 (there is no point to import the article to enwiki beta since the issue is in the non-existent on enwiki beta infobox template).

@matthiasmullie, @lwatson What I observed is different from the task description
(1) the image File:Aena_Zaragoza.svg is filtered out (i.e. not displayed) in the carousel. The old MMV and the new MMV do not display it - so, do not have it in the carousel makes the behavior consistent.

(2) File:Aena_Zaragoza.svg is not correctly displayed in dark mode (there are still unresolved issues with displaying svg files with transparent background in dark mode)

Screenshot 2026-06-17 at 11.29.39 AM.png (366×821 px, 175 KB)

(3) MMV (old & new) display File:Aena_Zaragoza.svg correctly in dark mode (and in the light mode). To clarify - clicking directly on the image File:Aena_Zaragoza.svg brings up MMV, so, technically the image is displayed in MMV. When in MMV you go through article's images, that image won't be present.

Etonkovidova moved this task from QA to Signoff on the Reader Growth Team (Sprint 6 (Jun 10 - 30) Q4 25/26) board.Wed, Jun 17, 3:42 PM

@Etonkovidova

Due to recent changes (specifically, image size exclusion), the image is now filtered out of the carousel.
Filed a separate Minerva bug related to the transparent image in the infobox: T429500: Transparent infobox images are not visible in dark mode
The fix should display the transparent images with a checkered background in the media viewer (detail view)

Expected behavior:

Clicking on a transparent image opens the media viewer (detail view), and the transparent image has a checkered background.

Change #1303535 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: use darkmode-override mixin for carousel images

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

Change #1303452 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Image Browsing: fix transparent images in carousel

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

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.8; 2026-06-23); removed: MW-1.47-notes (1.47.0-wmf.7; 2026-06-16).Wed, Jun 17, 8:00 PM

Change #1303552 had a related patch set uploaded (by Eric Gardner; author: LWatson):

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.7] Image Browsing: fix transparent images in carousel

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

Change #1303571 had a related patch set uploaded (by Eric Gardner; author: LWatson):

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.6] Image Browsing: fix transparent images in carousel

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

Change #1303571 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.6] Image Browsing: fix transparent images in carousel

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

Mentioned in SAL (#wikimedia-operations) [2026-06-17T22:52:05Z] <egardner@deploy1003> Started scap sync-world: Backport for [[gerrit:1303571|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303572|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303573|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]]

Mentioned in SAL (#wikimedia-operations) [2026-06-17T22:56:08Z] <egardner@deploy1003> egardner: Backport for [[gerrit:1303571|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303572|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303573|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

ReleaseTaggerBot edited projects, added: MW-1.47-notes (1.47.0-wmf.6; 2026-06-09); removed: MW-1.47-notes (1.47.0-wmf.8; 2026-06-23).Wed, Jun 17, 11:00 PM

Mentioned in SAL (#wikimedia-operations) [2026-06-17T23:04:36Z] <egardner@deploy1003> Finished scap sync-world: Backport for [[gerrit:1303571|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303572|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303573|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]] (duration: 12m 31s)

Change #1303552 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@wmf/1.47.0-wmf.7] Image Browsing: fix transparent images in carousel

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

Mentioned in SAL (#wikimedia-operations) [2026-06-17T23:10:05Z] <egardner@deploy1003> Started scap sync-world: Backport for [[gerrit:1303552|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303553|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303554|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]]

Mentioned in SAL (#wikimedia-operations) [2026-06-17T23:12:01Z] <egardner@deploy1003> egardner: Backport for [[gerrit:1303552|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303553|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303554|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2026-06-17T23:17:00Z] <egardner@deploy1003> Finished scap sync-world: Backport for [[gerrit:1303552|Image Browsing: fix transparent images in carousel (T429047)]], [[gerrit:1303553|MMV Beta Viewer: Make in-flight image downloads abortable (T429193)]], [[gerrit:1303554|MMV Beta Viewer: Delay the loading indicator on quick navigation (T429193)]] (duration: 06m 55s)