Safari 15: Flicker when creating and displaying textures in render loop

• Component: WebGL
• Status: RESOLVED DUPLICATE

Created attachment 446979 [details]
example code

When a texture is created and displayed in a render loop using requestAnimationFrame it causes severe flickering between the image and a black frame. 

The end-user solution is of course to prefer creating textures inside the render loop. But this shouldn't be flickering regardless, and other browsers don't have this issue.

https://jsbin.com/wuqivikupo/1/edit?html,output

[Alexey Proskuryakov]

Could you please confirm whether this is a new problem in Safari 15, and Safari 14.x worked well? 

Are any live websites affected?

Created attachment 447029 [details]
video of issue in safari 14

The issue is present in Safari 14 too. I've uploaded a video showing the issue in Safari 14.

Tested on 

MacBook Pro (Retina, Mid 2012)
macOS Catalina 10.15.7 (19H2)
2,6 GHz Quad-Core Intel Core i7

Created attachment 447032 [details]
video of issue in safari 14 mp4

[Kenneth Russell]

For what it's worth, this reproduces easily on Safari Technology Preview Release 136 (Safari 15.4, WebKit 16613.1.9.2).

Kimmo, I think this is related to state saving / restoration in the GPU-based texture uploading code. Do you think you could triage it?

[Kimmo Kinnunen]

Thanks for the report.
The underlying bug is most likely bug 203148.
To work around the problem, avoid deleting and recreating the texture object itself.
Instead, create the texture object once and use texImage2D to upload to it.

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