(broken out from T404378 while doing related perf work)

Currently the background color is calculated from a CORS-anonymous thumbnail that's loaded after we've already started opening the overlay, so there's a brief flash from the default neutral background color to the calculated average color.

If we instead make the thumbnails in the carousel and the vtoc CORS-anonymous as well, we can directly use them to calculate the background color before opening it in most circumstances (unless it's a slow network and thumbs didn't complete yet)

QA steps:

• In Chrome developer tools, set network throttling to "3G" or "slow 4G" to simulate a constrained mobile network, and "disable cache" for the worst-case scenario on every load
• When carousel appears, tap on images in the carousel to open them
  • the detail view should open immediately with the image area in the average background color state
  • after a few seconds the zoomed image should display, leaving the background color only under the caption
• There should be no "crop jump" of the zoomed image, and it should not be seen rasterizing in progressively. It should be either covered by the background color or fully complete, placed, and visible.
• There should be no "flash" of off-white/off-black (light/dark mode) anymore while opening the detail view unless you manage to tap an item before its thumbnails have loaded. This should be a small minority of interactions, but is possible on a slow connection.
• Note: we had a compatibility issue with Firefox (since resolved). Recommend testing in all 3 of Chrome, Safari, and Firefox if possible.

Example video of current state of patch:

Requirement

Scope: Image Browsing (carousel, VTOC, detail view).

• Carousel and VTOC thumbnails must be CORS-anonymous to allow pre-calculation of background color.
• When opening detail view, the background color must display immediately (no flash of neutral off-white/black).
• The zoomed image must load fully before showing, with no crop jump and no visible progressive rasterization.
• After the zoomed image loads, the background color should remain only behind the caption.
• On slow networks, if a thumbnail has not loaded yet, a neutral background flash may occur — this is acceptable as a minority case.
• Implementation must work consistently across Chrome, Safari, and Firefox.

BDD

Feature: Pre-calculate background color from carousel and VTOC thumbnails

  Scenario: Opening detail view with loaded thumbnail
    Given a carousel or VTOC thumbnail has already loaded
    When I tap the image to open detail view
    Then the detail view shows the pre-calculated average background color immediately
    And the zoomed image loads fully and replaces the background without crop jump or progressive rasterization

  Scenario: Opening detail view before thumbnail load
    Given a carousel or VTOC thumbnail has not yet loaded
    When I tap the image to open detail view
    Then the detail view may briefly show neutral background color
    And the zoomed image loads fully once ready

  Scenario: Cross-browser validation
    Given I test in Chrome, Safari, and Firefox
    When I open an image from the carousel or VTOC
    Then the background color logic and loading behavior are consistent across browsers

Test Steps

Test Case 1: Detail view with preloaded thumbnails

1. In Chrome DevTools, throttle network to "3G" or "Slow 4G" and disable cache.
2. Open an article with Image Browsing enabled and wait for carousel thumbnails to load.
3. Tap a loaded carousel image.
4. AC1: The detail view opens immediately with pre-calculated background color applied.
5. AC2: The zoomed image loads fully, with no crop jump or visible progressive rasterization.
6. AC3: After load, the background color remains only under the caption.

Test Case 2: Detail view before thumbnails loaded

7. Reload the article and quickly tap a carousel image before its thumbnail loads.
8. AC4: A brief flash of neutral background (light/dark mode) may appear.
9. AC5: The zoomed image then loads fully, with no crop jump.

Test Case 3: Cross-browser compatibility

10. Repeat Test Case 1 in Chrome, Safari, and Firefox.
11. AC6: Behavior is consistent across browsers (no regressions, no crop jump, no flash except when thumbnails not yet loaded).

QA Results - Patchdemo