Safari 14 WebGL alpha blending with framebuffer rendering seems broken

Question

I ran into a very strange issue recently and I am curious if anyone else came across this issue or if someone might spot an issue with my WebGL alpha blending function.

When having alpha blending enabled and combined with framebuffer rendering, it appears as if Safari 14 does not render anything. It used to work as expected in Safari 13 and it also works in all other major browsers (tested Chrome, Edge, Firefox)

Demo: https://jsfiddle.net/flek/rc6zbk0d/58/

You should see three red dots and a triangle, which turn purple after 2.5 seconds. This works in Chrome, Firefox, Safari 13, but not in Safari 14!

The key part that seems to throw Safari 14 off is the following (line 89 and 146 in the fiddle).

    blend: {
      enable: true, // This prevents Safari v14 from rendering the points.
      func: {
        srcRGB: 'src alpha',
        srcAlpha: 'src alpha',
        dstRGB: 'one minus src alpha',
        dstAlpha: 'one minus src alpha',
      },
    },

This might be a bug in Safari itself, or Regl, or my code. I am curious if anyone sees an issue with the blend function + framebuffer rendering.

Answer 1

I found the fix. Or I should rather say, Firefox came to the rescue by printing some useful warnings in the console!

Apparently Safari 14 changed the way extensions were loaded. Previously, when OES_texture_float was activated, the EXT_float_blend extension was activated as well. This is also the behavior described on MDN, if I understand it correctly:

On devices that support the EXT_float_blend extension, it is automatically, implicitly, enabled when any one or more of EXT_color_buffer_float, OES_texture_float, or WEBGL_color_buffer_float are enabled. This ensures that content written before EXT_float_blend was exposed by WebGL will function as expected.

Source: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend#usage_notes

However, this does not seem to be the case anymore. So one must manually activate WEBGL_color_buffer_float and then EXT_float_blend.

Here is the very same demo from above with the two extensions explicitly activated and now it works in Safari 14 as expected

Working demo: https://jsfiddle.net/5joqkugd/