Individual Project Banner "Blinks" When Switching

[xiasu]

For the Kinergy project, I submitted banner images which are relatively large (3440*1440). These images are showing up well, but I could see some "blinking" when they switch. Not sure what caused this.

Check this video:

Screen.Recording.2022-10-11.at.3.40.53.PM.mov

[jonfroehlich]

I wonder if this has something to do with the image sizes? You should check the sizes of the other banners (that don't flash) and compare.

[xiasu]

I double checked all pages of our site. Pages like "HOME", "PEOPLE" and "PROJECT" are showning banners without flashing.

However, all the individual projects with more than one banner has the same flashing issue, including those uploaded long ago.

Since the first banner shown when the webpage load is always good, and many projects only have one banner, this issue could have been ignored for quite some time.

I also checked with Safari on my mac, safari on iPhone, Chrome on my windows laptop, they all have exactly the same situation.

[jonfroehlich]

Revisited this during the current cleanup. The blink was still reproducible, though the original cause has shifted since the carousel was rewritten (#1288, Bootstrap → vanilla JS).

Root cause (current code): the crossfade is symmetric — outgoing slide fades 1→0 while incoming fades 0→1 at the same time. Since each slide is opaque (black bg + cover image), while both are mid-fade up to ~25% of #main-carousel's bright magenta gradient backdrop bleeds through at the midpoint → the pink/magenta flash.

This also explains @xiasu's 2022 observation that all multi-banner projects flashed regardless of image age — it's the fade mechanism, not image size. (The image-size/decode-lag angle was separately fixed by server-side thumbnailing to 1600×500.)

Fix (#1318): dip-free crossfade — the incoming slide fades in over a held-opaque outgoing slide, which only drops out after it's fully covered. An opaque slide always covers the backdrop, so there's no bleed-through; the 0.6s look and reduced-motion instant-cut are preserved. CSS-only, one file.

Verified with a headless-browser A/B at the transition midpoint: old symmetric fade shows the magenta wash (mean-RGB blue channel spikes ~+45), new asymmetric fade shows a clean photo-to-photo blend. Closing via #1318.