less button not visible

repro: click more button, remains in focus state after the button has changed to "less" state and isn't visible on background any longer.

Back to article button hidden, not rendering correctly
On iOS chrome it renders full width beneath my URL bar.

Full screen toggle tooltip
This should not appear. It has no close or dismiss affordance and persists after the new view loads.

Swapped captions
In the article for Katseye, they're using this pseudo gallery halfway down the page.

The captions for those images are swapped, and there's a weird gap beneath Shakira in the desktop version.

Smart cropping doesn't work well with vertical positioning on desktop

examples:
https://24f17e0e4a.catalyst.wmcloud.org/wiki/Ozzy_Osbourne?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:Ozzy_in_1984.jpg
https://24f17e0e4a.catalyst.wmcloud.org/wiki/Meryl_Streep?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:Meryl_Streep_cheerleader_2.jpg

Image appears twice
https://24f17e0e4a.catalyst.wmcloud.org/wiki/ChatGPT?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:Countries_where_ChatGPT_is_available.svg
https://24f17e0e4a.catalyst.wmcloud.org/wiki/ChatGPT?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:ChatGPT_availability_by_country_or_region.svg

Non-localized caption

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

[mediawiki/extensions/ReaderExperiments@master] Fix image/crop dimensions

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

In T405992#11234574, @JScherer-WMF wrote:

Smart cropping doesn't work well with vertical positioning on desktop

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1193234 seeks to fix some minor crop imperfections, but realistically, it won't really change these kind of crops.
The crop library as it is currently used is not even attempting to detect features like faces or anything; it probably only looks at areas of relatively higher concentration of contrast, or something "simple" like that.

In T405992#11234586, @JScherer-WMF wrote:

Image appears twice
https://24f17e0e4a.catalyst.wmcloud.org/wiki/ChatGPT?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:Countries_where_ChatGPT_is_available.svg
https://24f17e0e4a.catalyst.wmcloud.org/wiki/ChatGPT?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:ChatGPT_availability_by_country_or_region.svg

This is actually a different image; note the different filenames, and the different colorization for Ukraine in the SVG.
That said, there is an actual duplicate images issue as well (see T406139)

In T405992#11238817, @matthiasmullie wrote:

In T405992#11234574, @JScherer-WMF wrote:

Smart cropping doesn't work well with vertical positioning on desktop

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1193234 seeks to fix some minor crop imperfections, but realistically, it won't really change these kind of crops.
The crop library as it is currently used is not even attempting to detect features like faces or anything; it probably only looks at areas of relatively higher concentration of contrast, or something "simple" like that.

If poor cropping is a serious concern, our only other option for the initial A/B test would be to abandon the "smart" cropping entirely. We could always try to implement this again if we scale up the feature for permanent deployment (in which case we could stand up some kind of ML service for better results).

@JScherer-WMF I'm not able to reproduce the "less button not visible"(ref) in Chrome, Safari, or Firefox. Does the bug occur on a particular mobile device/browser?

Update: The Codex hover state styles made the button less visible on certain backgrounds in all browsers.

• An example on beta when the hover style is an issue (noted on iPhone SE or increased font size on mobile device): https://en.wikipedia.beta.wmcloud.org/wiki/Berlin?imageBrowsing=true&useskin=minerva#/imagebrowsing/File:Berlin,_Kreuzberg,_Chamissoplatz_4,_Mietshaus.jpg
• An example on localhost (not beta) when the hover style is an issue: wiki/Berlin?imageBrowsing=true&useskin=minerva#/imagebrowsing/File:Gendarmenmarkt_Panorama.jpg
• An example on localhost (not beta) when the hover style is not an issue: wiki/Cloud?imageBrowsing=true&useskin=minerva#/imagebrowsing/File:Cloud_types_en.svg

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

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: fix DetailView UI bugs

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

Summary of changes and findings

VisualTableOfContents (VTOC):

• Increased VTOC item height from 160px to 300px.
• Fixed grey boxes in Safari and iOS Chrome: This was caused by user agent styles setting a grey background color on buttons. Resolved by unsetting (resetting) the background color.
• Strange VTOC text formatting: Due to the Wikipedia cleanup template (https://en.wikipedia.org/wiki/Template:Cleanup) that applies custom styles to a span element with .cleanup-needed-content selector. Note: The example mentioned, https://en.wikipedia.beta.wmcloud.org/wiki/Paris?imageBrowsing=true&useskin=minerva#/imagebrowsing/File:Palais_de_la_Cite.jpg, displays different text locally versus on beta. On beta, the custom text format is not present.
• Swapped captions in pseudo-gallery: Due to an incorrect edit for the alt text in the original Katseye article, which was then reused in the VTOC.
• Undesired gap after 2nd to last image: Due to custom border styles applied to the last and 2nd to last items. Solution: Remove the custom border styles to display a masonry layout throughout the grid and create clear separation between headers and image items.

DetailView:

• Decreased height of solid background color above the caption text.
• Removed fullscreen toggle tooltip.
• Fixed visibility of less/more button: The issue was that Codex hover state styles made the button less visible. Resolved by unsetting the hover state styles.
• Non-localized caption: Due to the incorrect file information in Commons https://commons.wikimedia.org/wiki/File:ChatGPT_logo.svg
  

Overlay:

"Back to article" button is hidden: Due to mobile browser UI (address bar and navigation buttons). This article about mobile viewport explains that the mobile browser's UI changes size as you scroll, and the vh unit is a static value:

a static unit equal to the size of the viewport when the browser UI was its smallest (and the content / "view size" was the largest).

One of the problems with vh being the 'largest view size' is that anything that is height: 100vh is now larger or overflows the screen when you first load a page. It's pretty difficult, using just CSS, to get content to fit the page exactly.

Note: Dynamic viewport height (dvh) is unsupported in multiple browsers.

Unexpected browser feature "viewport-unit-variants" is not supported by Edge 79,80,81,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107, Firefox 49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100, Chrome 49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107, Safari 10,11,12,13,14,15,10.1,11.1,12.1,13.1,14.1,15.1,15.2-15.3, Safari on iOS 10.0-10.2,10.3,11.0-11.2,11.3-11.4,12.0-12.1,12.2-12.5,13.0-13.1,13.2,13.3,13.4-13.7,14.0-14.4,14.5-14.8,15.0-15.1,15.2-15.3 (plugin/no-unsupported-browser-features)Stylelint(plugin/no-unsupported-browser-features)

Issues not reproducible locally or on beta

These issues don't appear locally or on beta. They could be outdated or specific to patchdemo:

• DetailView: "More" button is not present when using a direct link to an image in DetailView
• Carousel: Loading state has odd boxes (occurs in patchdemo on mobile device)
• Carousel: Images failing to load

Test wiki created on Patch demo by Mmullie (WMF) using patch(es) linked to this task:
https://ba8618afa4.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://8b9f2040a3.catalyst.wmcloud.org/wiki/Main Page

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://8b9f2040a3.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://a473d24131.catalyst.wmcloud.org/wiki/Main Page

I'm working on T405992#11234451, specifically testing the overlay's dynamic viewport height and CSS fallback for legacy browsers to ensure the "back to article" button remains visible and isn't hidden under mobile browser UI.

Testing Limitations

Note: Testing is limited due to access to physical devices, such as Android devices.

iOS Simulator:
Apple's Xcode Simulator allows downloading iOS versions 15-18. I've installed iOS 15, but it's unavailable and unsupported on my macOS 15.6.1.

Legacy device testing:
I created a patchdemo and tested the fallback behavior on an older iPad (iPad mini 2, iOS 12.5.7). The findings aren't great, and I only have photos at this point.

• DetailView caption text color is color: @color-base, but should be color: var( --dominant-color-contrasting ) via oklch. Refer to browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility.
• DetailView image is cut off, and the height should take up the full viewport. The height uses dynamic viewport height (dvh) height: 100dvh, and dvh is not compatible in legacy browsers.
• DetailView control buttons overlap each other.
• VTOC grid items overlap each other.

Next steps:

• Investigate if there's a way to inspect developer tools on my iPad for more detailed debugging information.
• Based on initial findings, we likely need additional fallback behavior for both the DetailView and VTOC grid on legacy browsers.
• Test on legacy devices
• Discuss browser compatibility goals (as raised in T406365: Image browsing setup fails on iOS < 18.2)

In theory per https://www.mediawiki.org/wiki/Compatibility#Grade_A we should be aiming for iOS 11.3 or later compatibility with most features? I'm not sure what we've practically decided on ourselves for this project, if at all.

Follow-up: T406379: Bug Bash: The Sequel- 2 Old 2 Browsers

Change #1193234 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Fix image/crop dimensions

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

Bug: The more/less button label has black text (color-base) on Safari, Firefox, and Chrome browsers (reported on macOS 15.7.1). Occurs on beta only, not localhost.

Safari 26.0.1
Chrome 141.0.7390.65
Firefox 143.0.4

What should happen
The example below is localhost on Firefox. The button style is color: var(--dominant-color-contrasting) and computed value oklch().

Findings

The bug is present only on beta when forcing a custom small viewport on desktop in responsive mode (refer to screenshots above). However, when selecting a responsive device preset like iPhone SE from the list, the button label text displays correctly in white.

Next steps:

• No action at this time to fix in beta.
• Test in production

Nav box templates are sending images to the gallery and vtoc

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://6afa7e6030.catalyst.wmcloud.org/wiki/Main Page

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://a473d24131.catalyst.wmcloud.org/w/

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

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Ensure router updates when active image changes

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

Bug: Updating the Detail View image does not change URL fragment

This can currently be seen on Beta.

Steps to reproduce:

1. Go to an article page with ImageBrowsing enabled and click an image in the carousel to open the DetailView.
2. Notice the URL fragment should correspond to the image that was clicked.
3. Click other images in the Visual Table of Contents.
4. Notice how the URL fragment *does not* change to reflect the new image being displayed (it should update each time).
5. Hard-reload the page after clicking through a few different images.
6. The detail view will restore with the original image that was chosen from the carousel (not the most recent image being displayed); we want the most recent image to be the one that is displayed when this happens.

Patch to fix here:

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1195267

QA steps – go though the same steps as above and verify that URL fragment changes with each new image loaded into detail view; hard-reloading the page should cause the most recently displayed detail view image to show up when everything reloads.

Change #1195267 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Ensure router updates when active image changes

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

Ok, if we can fit it in, I'd love to add some basic cropping behaviour to images in the vtoc. We want the images to fill an area that is 300 px tall and as wide as the vtoc caption frame as much as possible.

What happens if an image is really wide?

• maintain aspect ratio
• height 300px
• width = width of the vtoc content at that viewport resolution (roughly 350px max I think. I want to check this but the patchdemo isn't working)
• center align and crop the sides

Examples:

What happens when images are really tall and skinny?

• Maintain aspect ratio
• height 300px
• image width is whatever is appropriate for the aspect ratio. Without some kind of smart cropping, tall skinny images will look very small and skinny, and I'm ok with that for now because those images are relatively rare copmared to panos and landscape photos.

Example:

Much more common are portrait images which still look fine with their aspect ratio maintained:

@matthiasmullie if you have time to look at this on Monday while everyone else is out, that's great. If not, no worries. We can discuss when we're all back in the office on Tuesday.

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

[mediawiki/extensions/ReaderExperiments@master] Implement smart crop in VTOC

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

Change #1193399 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC

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

In the interest of closing this task (and the current sprint) out so that we can begin the next one, I'd like to move all of the uncompleted work onto "Bug Bash 3" (T406991) so that we can track this as part of our upcoming sprint.

Right now it looks like the remaining issues are:

• VTOC image layout
• Potentially excluding navbox images and other images that we don't want to show up (50x50 flag SVGs, etc).

Change #1196170 had a related patch set uploaded (by Kimberly Sarabia; author: LWatson):

[mediawiki/extensions/ReaderExperiments@wmf/1.45.0-wmf.22] ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC

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

Change #1196170 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@wmf/1.45.0-wmf.22] ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC

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

Mentioned in SAL (#wikimedia-operations) [2025-10-14T21:17:09Z] <ladsgroup@deploy2002> Started scap sync-world: Backport for [[gerrit:1196170|ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC (T405992)]]

Mentioned in SAL (#wikimedia-operations) [2025-10-14T21:19:32Z] <ladsgroup@deploy2002> ksarabia, ladsgroup: Backport for [[gerrit:1196170|ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC (T405992)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-10-14T21:31:31Z] <ladsgroup@deploy2002> Finished scap sync-world: Backport for [[gerrit:1196170|ImageBrowsing: fix UI bugs in Overlay, DetailView and VTOC (T405992)]] (duration: 14m 22s)

Change #1195695 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Implement smart crop in VTOC

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

Change #1196765 had a related patch set uploaded (by Bvibber; author: Bvibber):

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Fix merge conflict borkage

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

the smart crop in VTOC looks real nice:

Change #1196765 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Fix merge conflict borkage

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

Test wiki on [[ | Patch demo ]] by LWatson-WMF using patch(es) linked to this task was deleted:

https://6afa7e6030.catalyst.wmcloud.org/w/