Transparency issue on smartphone / iOs / iPadOS

[julienvincenot]

Hi,

I’m very new to Three.js and Js coding in general so apologies in advance if this is obvious.

I have a simple scene with a sphere. I’m trying to work on the opacity of my background layer (via renderer.setClearColor), varying the opacity with gsap, from 1 (full yellow background) to 0 (transparent). Behind the Three.js frame I have various JSX interfaces controlled by React.js.

The works fine on my mac on both Chrome and Safari, although the latter shows a weird colored border around my sphere.

On iOS/iPad OS on the other hand, the background is wrong, and shows color where its supposed to be completely transparent. That’s happening in both Safari and Chrome, see screenshots.

If needed I can simplify the code to show it here, I was just wondering if this was a known issue on iOS.

Thanks a lot in advance for your help!

Julien

See below in order
Mac-Safari
Mac-Chrome
iOS-Safari
iOS-Chrome

[julienvincenot]

No one can reproduce this?

[Mugen87]

You might get better feedback if you share a live example that demonstrates the issue. In this way, community members can easier verify the issue on their devices.

[julienvincenot]

Thanks @Mugen87 for your reply !
Sorry I was not sure I would be able to bundle this into a demo, it’s quite a mess of a project, again I’m new to both React and Three.js. But I managed to reduce it here test-three+gsap - CodeSandbox and the problem happens exactly the same way. Weird semi-transparent yellow instead of full transparent on iOS. Also the same yellow border + transparent background in Safari only on the Mac (that one doesn’t really matter for me but I guess it’s related…)
If you have a iOS / iPadOS device, can you check if it is the same?
Thanks again !

[julienvincenot]

Any idea about this?
I hope the CodeSandbox is straightforward enough. Please let me know, I’m in learning mode Thanks !