High-end iPhone displays the image when alpha channel is 0 at runtime only, the screenshot is OK

[scarletsky]

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 live example below.
2. You should see a white square, if you see firefox's logo, it is NOT OK.

Code

import * as THREE from "https://esm.sh/three";

const imgUrl = 'https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample6/cubetexture.png';


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const textureLoader = new THREE.TextureLoader();
textureLoader.load(imgUrl, (texture) => {
    const customShaderMaterial = new THREE.ShaderMaterial({
        uniforms: {
            u_texture: { value: texture }
        },
        vertexShader: `
            varying vec2 vUv;

            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `,
        fragmentShader: `
            uniform sampler2D u_texture;
            varying vec2 vUv;

            void main() {
                vec4 texel = texture2D(u_texture, vUv);
                texel.a = 0.0;
                gl_FragColor = texel;
            }
        `
    });

    const geometry = new THREE.PlaneGeometry(2, 2);
    const mesh = new THREE.Mesh(geometry, customShaderMaterial);
    scene.add(mesh);
    renderer.render(scene, camera);
});

Live example

https://codepen.io/scarletsky/full/oNmzNPz

Screenshots

Runtime of iPhone XR (OK)

Runtime of iPhone 12 Pro Max (NOT OK)

Screenshot of iPhone 12 Pro Max (OK)

Version

latest

Device

Mobile

Browser

Safari

OS

iOS

[Mugen87]

Please report this issue at the Webkit bugtracker. We can't fix it in this repository.

https://bugs.webkit.org/