Bug 278225 – REGRESSION: WebGPU in Safari Technology Preview 201 renders transparent pixels as opaque black

• Component: WebGPU
• Status: NEW

[Gabriele Cirulli]

Created attachment 472188 [details]
Left: Safari 17.5, right: Safari Technology Preview 201

When using Safari Technology Preview 201 on macOS 14.5 on a M2 MacBook Air, transparent pixels in an image rendered using WebGPU renders as opaque black.

The provided demo has been built using Pixi.js which offers both WebGL and WebGPU backends. The WebGL backend is unaffected.

This is considered a regression due to the WebGPU backend rendering correctly in the current Safari version (Version 17.5 (19618.2.12.11.6)) on macOS 14.5. I have not tested the copy of Safari provided with macOS 15 Sequoia.

Steps to reproduce:
1. Clone https://github.com/gabrielecirulli/pixi-alpha-issues
2. Browse into the directory in terminal
3. Run `pnpm install` (`npm` may work too)
4. Run `pnpm run dev`
5. Browse to `localhost:5173` using Safari 17.5 and Safari Technology Preview 201
6. Use the provided checkbox to switch between WebGL and WebGPU

Expected result:
Transparency renders correctly (the background displays as blue on all canvas samples)

Actual result:
The background displays as black on all canvas samples

Note that this issue is only present in Safari Technology Preview and this sample renders correctly in all other browsers including Chrome Canary (Version 129.0.6660.0 (Official Build) canary (arm64))

[Radar WebKit Bug Importer]

<rdar://problem/134068037>

[Mike Wyrzykowski]

Fairly certain this is somewhat due to https://commits.webkit.org/279714@main

[Mike Wyrzykowski]

https://github.com/WebKit/WebKit/pull/32320