Skip to content

fix(image-bank): black screen when opening the image bank - #76

Merged
BlueShork merged 1 commit into
mainfrom
fix/image-bank-black-screen
Sep 24, 2026
Merged

BlueShork merged 1 commit into
mainfrom
fix/image-bank-black-screen

Conversation

@BlueShork

Copy link
Copy Markdown
Owner

Problem

In v0.9.0, opening the Image Bank blanks the whole window when a device has at least two rows of screenshots.

Cause

On WebKit with ScrollTimeline support (macOS 26), motion accelerates useScroll and passes each useTransform input range to WAAPI as keyframe offsets. The ranges FlowScrollCell computes go below 0 on the first rows, above 1 on the last rows, and are not sorted. element.animate then throws a TypeError. The app has no error boundary, so React unmounts everything and leaves a black window.

Fix

  • A new toKeyframeOffsets() helper (in src/components/effects/keyframeOffsets.ts) clamps the range into [0, 1] and keeps it non-decreasing. The first row stays full size at the top of the page, which matches the intended design.
  • Unit tests for the helper.

Test plan

  • vitest (helper tests)
  • tsc --noEmit
  • Open the Image Bank on macOS 26 with a device that has 2+ rows of baselines, then scroll

🤖 Generated with Claude Code

On WebKit with ScrollTimeline support (macOS 26), motion hands
useTransform's input range to WAAPI as keyframe offsets. FlowScrollCell
computed ranges that dip below 0 on the first rows, exceed 1 on the last
and aren't sorted, so element.animate threw a TypeError. With no error
boundary that unmounted the whole app, leaving a black window whenever the
image bank showed two or more rows of screenshots.

Clamp the range into [0, 1] and keep it non-decreasing.
@sonarqubecloud

Copy link
Copy Markdown

@BlueShork
BlueShork merged commit e7cf636 into main Sep 24, 2026
6 checks passed
@BlueShork
BlueShork deleted the fix/image-bank-black-screen branch September 24, 2026 10:40
@github-actions github-actions Bot locked and limited conversation to collaborators Sep 24, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant