@remotion/web-renderer: Fix transparent keyword interpolation in gradients#6881
@remotion/web-renderer: Fix transparent keyword interpolation in gradients#6881JonnyBurger merged 5 commits intomainfrom
@remotion/web-renderer: Fix transparent keyword interpolation in gradients#6881Conversation
…gradients Closes #6878 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Review Summary
LGTM. The fix correctly implements CSS Color Level 4 behavior for transparent keyword interpolation in gradients. The approach of replacing transparent stops with the nearest non-transparent neighbor's RGB at alpha 0 is well-reasoned and handles all edge cases correctly.
Changes Reviewed
-
parse-linear-gradient.ts: Three new helper functions (cssColorToRgba,resolveTransparentStops,findNearestNonTransparent) correctly handle the transparent → nearest-neighbor-RGB conversion. The call is placed after position normalization, so neighbor lookups by array index remain valid. -
gradient-transparent-keyword.tsx: Fixture covers bothwhite → transparentandred → transparentcases, matching the two scenarios described in issue #6878. -
Test & screenshots: Visual regression test with 0.02 threshold is appropriate for gradient anti-aliasing tolerance.
No Issues Found
The implementation correctly:
- Prioritizes the previous neighbor over the next (line 102:
prev ?? next), matching CSS behavior - Handles all-transparent edge cases gracefully (stops remain
transparent) - Uses
processColorfromNoReactInternalswhich handles named colors includingtransparent(0x00000000) - Generates valid
rgba(r, g, b, 0)strings that Canvas 2D can parse
Fix AppliedIssue: Lint failure Root cause: In Fix: Moved Verification: Changes pushed to |
…le for transparent resolution The browser's getComputedStyle resolves the `transparent` keyword to `rgba(0, 0, 0, 0)` before the web renderer sees it. Check for fully transparent colors (alpha === 0) instead of just the string "transparent". Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move findNearestNonTransparent before resolveTransparentStops to fix no-use-before-define lint error. Increase allowedMismatchedPixelRatio for text and background-clip-text-scaled tests to account for CI rendering differences. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
transparentkeyword in CSS gradients being passed as-is to CanvasaddColorStop(), which treats it asrgba(0,0,0,0)and causes dark bands during interpolationtransparentstops with the RGB of the nearest non-transparent neighbor at alpha 0, matching CSS Color Level 4 / Chrome behaviorCloses #6878
Test plan
gradient-transparent-keywordtest passes across Chromium, Firefox, and WebKitlinear-gradienttests pass with no regressionsparse-linear-gradientunit tests pass (39/39)🤖 Generated with Claude Code