Why is my transparent WebM black in Safari?

Safari doesn't composite WebM alpha. Chrome and Firefox do. Your WebM file is correct—Safari just ignores the transparency layer and shows black instead.

Export WebM for Chrome, then handle Safari separately

This tool writes VP9 WebM with alpha for Chrome, Firefox, and OBS. Safari still needs HEVC-with-alpha.

Export with this tool

15 free seconds on first sign-in. No subscription required to try a short clip.

Safari plays WebM but doesn't render alpha

Important: Safari does support WebM playback. What it doesn't support is compositing the alpha channel. This is a critical distinction. Don't write "Safari doesn't support WebM"—that's incorrect. Safari plays VP9 WebM video; it simply doesn't read or render the alpha layer.

WebKit bug #275908 tracks this limitation. As of 2026-05, the bug remains open with ongoing discussion.

The Safari solution: HEVC-with-alpha

Apple's HEVC Video with Alpha works on:

  • iOS 13+
  • macOS Catalina+
  • Safari 13+

This format stores transparency in a separate HEVC layer. Safari (and other Apple platforms) can composite it. Older Safari versions may play HEVC but not render the alpha layer—test your target OS version.

Serving both formats for cross-browser support

Use the HTML5 video element with multiple source tags:

<video>
  <source src="video.mov" type='video/mp4; codecs="hvc1"' />
  <source src="video.webm" type="video/webm" />
</video>

List HEVC first. Safari will pick it. Chrome and Firefox will skip it (no HEVC support or licensing) and fall back to WebM. This ensures transparency works in both browsers.

Capability detection

Don't rely on user-agent sniffing. Use the Media Capabilities API to test whether the browser can decode and display a given codec. Older Safari versions may report HEVC support but not composite alpha. Capability detection is more reliable than UA strings.

iOS-specific concerns

Multiple WebM videos on a single iOS page have been reported to cause memory pressure and crashes. This is anecdotal (mark as "有报告"), not an official Apple statement. If you're embedding many transparent videos, test on actual iOS devices. HEVC-with-alpha may be more stable in that scenario.

Frequently Asked Questions

Why doesn't Safari just support WebM alpha like Chrome?

Apple prioritizes its own codecs (HEVC) over WebM. WebKit can play VP9 video but doesn't implement alpha compositing for it. The decision is Apple's; the WebKit bug remains open.

Will Chrome on iOS support WebM alpha?

No. Chrome, Firefox, and all third-party browsers on iOS use WebKit under the hood (Apple requirement). They inherit Safari's limitations, including no WebM alpha compositing.

Can I polyfill WebM alpha in Safari with JavaScript?

Theoretically yes, by decoding video frames to canvas and manually compositing alpha. This is complex, CPU-intensive, and not practical for most use cases. Use HEVC-with-alpha instead.

Sources

Export for Chrome, Firefox, and OBS

Upload your video and get transparent WebM with alpha. Use HEVC-with-alpha if the page must work in Safari.

Export with this tool

15 free seconds on first sign-in. No subscription required to try a short clip.

Related guides