Bug 278926 – Additive colors broken with WebGL canvas and premultiplied alpha compositing

• Status: NEW
• Component: WebGL

[Mirei Meyer]

In a client project we render a 3D scene on a transparent background with WebGL which is then composited/blended with other HTML page elements.
We use premultiplied alpha and render some elements, like glass reflections, with alpha==0, so that they work even when blended on top of the HTML page.

This works fine on Google Chrome and Firefox on Windows and Android, but doesn't on Safari and Chrome on macOS machines. It seems that whenever alpha==0 the RGB components become zero (or otherwise ignored) in the compositing step.

Minimal reproduction (single HTML file): https://clients.viscircle.com/research/canvas-alpha-bug/.
The reproduction draws a single, red triangle on a transparent background. Then it clears the alpha component of the output framebuffer to zero via glColorMask, glClearColor and glClear. The expected result is that a red triangle is visible. In Safari the triangle isn't visible.

I'm testing on macOS 14.6.1 on a M2 Max MBP myself. In our testing we haven't been able to reproduce the issue on any iOS devices yet.

Not sure if this use case is covered by the HTML or WebGL standards, or which standard even applies, given that this falls somewhere between both worlds, but the HTML living standard at least appears to acknowledge the possibility of drawing premultiplied alpha additive colors into a WebGL canvas: https://html.spec.whatwg.org/#premultiplied-alpha-and-the-2d-rendering-context

[Kimmo Kinnunen]

> I'm testing on macOS 14.6.1 on a M2 Max MBP myself. In our testing we haven't been able to reproduce the issue on any iOS devices yet.

FWIW, it seems to work on macOS 15 Sequoia beta.

> Not sure if this use case is covered by the HTML or WebGL standards, or which standard even applies, given that this falls somewhere between both worlds, but the 

I think this should be defined by the CSS compositing model.

I don't know if it is supposed to work the way it works now in macOS 15/iOS, the way you expect.. I'll ask around.


> HTML living standard at least appears to acknowledge the possibility of drawing premultiplied alpha additive colors into a WebGL canvas: https://html.spec.whatwg.org/#premultiplied-alpha-and-the-2d-rendering-context

This is specifying how the premultiplied WebGL is drawn to (premultiplied) 2D Context.
It's a good and insightful explanation of the situation, though.

[Kimmo Kinnunen]

Correction: seems to work on ASi on Sequoia, fail on Intel

[Karl Dubost]

For people testing later, I have the same behavior on the 3 browsers. 
Safari Technology Preview  202           20620.1.2
Firefox Nightly            131.0a1       13124.8.23
Google Chrome Canary       130.0.6680.0  6680.0


but I have a red triangle on my external screen.
and all black on on my retina screen.

[Radar WebKit Bug Importer]

<rdar://problem/135417966>