Skip to content

@remotion/renderer: Fix transparent background for WebP renderStill() output#6913

Merged
JonnyBurger merged 2 commits intomainfrom
copilot/fix-omit-background-webp
Mar 26, 2026
Merged

@remotion/renderer: Fix transparent background for WebP renderStill() output#6913
JonnyBurger merged 2 commits intomainfrom
copilot/fix-omit-background-webp

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 26, 2026 •
edited
Loading

omitBackground was hardcoded to false for WebP, causing Puppeteer to never send Emulation.setDefaultBackgroundColorOverride to CDP — resulting in a solid white background instead of transparency.

Changes

  • packages/renderer/src/take-frame.ts: Extend omitBackground condition to include 'webp' alongside 'png'
// Before
omitBackground: imageFormat === 'png',

// After
omitBackground: imageFormat === 'png' || imageFormat === 'webp',
Original prompt

This section details on the original issue you should resolve

<issue_title>Issue: renderStill() with webp has solid white background due to hardcoded omitBackground.</issue_title>
<issue_description>From message posted on Discord by nandushaji

<@701030996430159872> Following up on this! I was testing renderStill() with imageFormat: 'webp' expecting it to be transparent based on your message, but it was coming out with a solid white background.
I dug into the @remotion/renderer source code to see why, and it looks like the omitBackground flag passed to Puppeteer is strictly hardcoded to only be true for PNGs.
In packages/renderer/src/take-frame.ts (and screenshot-dom-element.ts), I found this:

const buf = await screenshot({ page: freePage, omitBackground: imageFormat === 'png', // <-- This forces false for 'webp' path: (wantsBuffer ? undefined : output) ?? undefined, type: imageFormat, // ... });

Because of imageFormat === 'png', when I pass imageFormat: 'webp', omitBackground evaluates to false. As a result, Puppeteer never sends the Emulation.setDefaultBackgroundColorOverride command to CDP, and Chrome paints a solid white background before capturing the WebP.</issue_description>

<agent_instructions>we should also default to transparent when webp is selected</agent_instructions>

Comments on the Issue (you are @copilot in this section)

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 26, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Mar 26, 2026 9:24am
remotion Ready Ready Preview, Comment Mar 26, 2026 9:24am

Request Review

@vercel vercel bot temporarily deployed to Preview – remotion March 26, 2026 09:18 Inactive
Copilot AI changed the title [WIP] Fix background issue in renderStill() for webp images @remotion/renderer: Fix transparent background for WebP renderStill() output Mar 26, 2026
Copilot AI requested a review from JonnyBurger March 26, 2026 09:23
@JonnyBurger JonnyBurger marked this pull request as ready for review March 26, 2026 09:38
@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Mar 26, 2026 •
edited
Loading

Reviewed PR #6913 — approved. The fix correctly extends the omitBackground CDP flag to include webp, aligning it with the existing transparent body style condition. No other callsites or missing changes found.

Task list (5/5 completed)
  • Checkout PR and read diff
  • Investigate the change area — trace data flow and verify correctness
  • Check for other locations that may need the same fix (screenshot-dom-element.ts, etc.)
  • Run impact analysis — grep for related patterns
  • Submit review or report progress
Pullfrog  ｜ [View workflow run](https://github.com/remotion-dev/remotion/actions/runs/23587452662/job/68684021961) ｜ Triggered by [Pullfrog](https://pullfrog.com) ｜ Using `Big Pickle` (free) ｜ [𝕏](https://x.com/pullfrogai)

pullfrog[bot]
pullfrog bot reviewed Mar 26, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@pullfrog pullfrog bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct fix. The transparent document.body.style.background was already applied for webp (line 32-34), but the omitBackground CDP flag was not — so Chrome still composited a white background before capture. This one-line change closes the gap. No other callsites need updating.

Pullfrog  ｜ View workflow run ｜ Using Big Pickle (free) ｜ 𝕏

@JonnyBurger JonnyBurger merged commit 94d9aac into main Mar 26, 2026
19 checks passed
@JonnyBurger JonnyBurger deleted the copilot/fix-omit-background-webp branch March 26, 2026 10:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pullfrog pullfrog[bot] pullfrog[bot] left review comments

@JonnyBurger JonnyBurger Awaiting requested review from JonnyBurger

Assignees

@JonnyBurger JonnyBurger

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Issue: renderStill() with webp has solid white background due to hardcoded omitBackground.

2 participants

@JonnyBurger