Bug 264081 – iPhone displays the image when alpha channel is 0 at runtime only, the screenshot is OK

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: WebGL

[scarlex]

Created attachment 468453 [details]
it should be a white square, not includes firefox's logo.

## Description

This will happen when we try to draw a texture and set its alpha channel to 0 in the shader.

This is a very interesting bug.
It only occurs at runtime in high-end iPhone.
When we try to take a screenshot, the screenshot appears normal.

Here are my tested devices:

- MacBook Pro (M2 Pro, MacOS 13.3.1), runtime is OK.
- iPhone 8 (iOS 16.5), runtime is OK.
- iPhone XR (iOS 15.4), runtime is OK.
- iPhone SE2 (iOS 14.2), runtime is OK.
- iPhone 12 Pro Max (iOS 14.8.2), runtime is NOT OK.
- iPhone 12 Pro Max (iOS 16.1), runtime is NOT OK.
- iPhone 13 mini (iOS 17.1), runtime is NOT OK.
- iPhone 13 Pro Max (iOS 16.1), runtime is NOT OK.

## Reproduction steps

1. Open the https://codepen.io/scarletsky/full/oNmzNPz
2. You should see a white square, if you see firefox's logo, it is NOT OK.


I would like to know if there is any temporary workaround?

[scarlex]

Created attachment 468454 [details]
iPhone XR is OK

[scarlex]

Created attachment 468455 [details]
Screenshot is always OK

[Kimmo Kinnunen]

Thanks for the report. I can repro it.
On iPad the rendering is ok until tab in a tab bar is activated so that the tab menu pops up. Then the compositing changes and the hidden image comes visible.

Might be that the texture doesn't somehow get the rgb *= a correctly or precision problem.

To workaround, you could use expression like:

  texel = texel.a == 0 ? vec4(0.) : texel;

[scarlex]

(In reply to Kimmo Kinnunen from comment #3)
> Thanks for the report. I can repro it.
> On iPad the rendering is ok until tab in a tab bar is activated so that the
> tab menu pops up. Then the compositing changes and the hidden image comes
> visible.
> 
> Might be that the texture doesn't somehow get the rgb *= a correctly or
> precision problem.
> 
> To workaround, you could use expression like:
> 
>   texel = texel.a == 0 ? vec4(0.) : texel;

Thanks for the reply.
In fact I want to do alpha blending(ADDITIVE) with the output texture.
I am creating a bloom fbo, it has RGB value, and A is 0.0 (because I want to keep the CSS background of canvas element). If I make all texel 0.0, my bloom fbo has no value.

[Kimmo Kinnunen]

The webgl rendering context is created with premultipliedAlpha==true. This means that rendering has to compute the alpha into the color components correctly. Otherwise the compositing will not be correct.

Thus the shader must write premultiplied colors. For example, half-translucent red color would be:
  vec red = vec1(1, 0, 0, 1);
  gl_FragColor = red * .5;

For the testcase, when you assign .a = 0; it means that other components must be consistent with this -- otherwise the color is not premultiplied. For premultiplied alpha == 0 case, all other components must be zero too.

It sounds that your algorithm needs premultipliedAlpha == false. It is unpremultiplied algorithm. WebKit does not support premultipliedAlpha=false compositing correctly.

Thus to workaround this, you would need to make the drawing into an separate FBO, backed by a separate texture. Then you would need to make a premultiplication draw from that texture to the default framebuffer object. Your premultiplication shader would be:
   gl_FragColor = vec4(texColor.rgb * texColor.a, texColor.a);


Marking this as a duplicate of WebKit umbrella bug for implementing premultiplication correctly. Please provide more info, perhaps more representative testcase, in case I have misunderstood.

*** This bug has been marked as a duplicate of bug 263770 ***

[Kimmo Kinnunen]

>In fact I want to do alpha blending(ADDITIVE) with the output texture.
I am creating a bloom fbo, it has RGB value, and A is 0.0 (because I want to keep the CSS background of canvas element). If I make all texel 0.0, my bloom fbo has no value.

And note further: with WebGL you can do custom per-pixel composition only with what is in the WebGL rendering context. You cannot do custom RGB compositing with the CSS background, as that is not present in the WebGL default framebuffer.

To blend with CSS contents, you have to define the blend with CSS operations.
Nevertheless, no CSS blending will show anything correct if the pixel is transparent black, e.g alpha == 0.

[Kimmo Kinnunen]

*** This bug has been marked as a duplicate of bug 200026 ***