Incompatibility with Safari iOS

[phinoda]

Hi Fritz, I've been testing the scatterplot on the following touchable devices:

• iPad (Safari, iOS 15.5)
• iPhoneX (Safari, iOS 15.5) It seems the dots cannot be rendered on touchable device. Also, it's not possible to pan the canvas. The dots do render on Chrome device simulator (Chrome version 106.0.5249.119), but still can't pan.

Thoughts?

Thanks!

[flekschas]

Mhhh this is odd. I am not sure from the top of my head why the interactions don't work but it sounds like the issue is related to the Safari on iOS. It might be that Safari on iOS does not support or disables certain WebGL extensions required to render the scatter plot.

To be frank, when I created the library I wasn't really considering mobile devices much as I was focusing on large-scale data exploration. Anyway, thanks for bringing this up. I'll have to test this myself a little bit.

[phinoda]

I checked the demo site - it's not rendering on iOS and crashes upon several reloads. Personally I feel this might relate to iOS's compatibility with WebGL 2.0. iPhone supports WebGL 2.0 starting iOS 15 but it looks like the problem still exists. These discussions might help: "Webgl canvas is causing massive memory leaks on iOS 14 which may be the reason for the silent crashes and reloads." -> https://developer.apple.com/forums/thread/662251 https://github.com/regl-project/regl/issues/378

[flekschas]

regl-scatterplot does not use WebGL 2. It's using WebGL 1. That's why I believe it might be related to the webgl extensions. The library uses the following four GL extensions:

1. OES_texture_float
2. OES_element_index_uint
3. WEBGL_color_buffer_float
4. EXT_float_blend

I've been out all week and haven't had a chance to do any testing but https://webglreport.com/ could help us. When I open the website, it turns out that EXT_float_blend is not a supported extension. That might be the reason why regl-scatterplot is not rendering in Safari on iOS

[flekschas]

On macOS, Safari does list EXT_float_blend as a supported extension.

Also weird, according to https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend#browser_compatibility the extension is supported by iOS so maybe webgl-report is just not working correctly and that the error is caused by something else. I'll have to do some remote debugging so find out what errors are thrown

[flekschas]

Okay so the sad news is that EXT_float_blend is not supported, which is why regl-scatterplot does not render on Safari iOS.

As a sanity, I've also tested https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds which relies on EXT_float_blend too. That pages also does not load in Safari iOS unfortunately.

I don't think there's anything I can do actively to fix this issue as the float blending extension is needed to support a feature. Hopefully Apple will bring back EXT_float_blend support on iOS...

Meanwhile, I've opened a ticket with MDN to indicate that Safari on iOS does not support this extension starting with iOS version 16: https://github.com/mdn/browser-compat-data/issues/18061

[phinoda]

So I've done a bit testing about your demo site, the 2d point clouds for sanity and my own implementation. Here's my result:

What intrigued me is that:

1. Correct me if I'm wrong, but I assume Chrome on iOS would work but I've got no luck, and
2. My implementation somehow renders on MacOS Safari with the other two not working 🤯

[flekschas]

Correct me if I'm wrong, but I assume Chrome on iOS would work but I've got no luck, and

No. As far as I know, on iOS you really only have one browser rendering engine, which is WebKit. Chrome on iOS is really only a different UI on top of the same rendering engine that's powering Safari. So I am not surprised that it's not working on iOS Chrome.

My implementation somehow renders on MacOS Safari with the other two not working 🤯

This seems to be a different issue and unrelated to Safari iOS. regl-scatterplot works fine for me in Safari (v16) on macOS (v12.6). Could you open a new issue and provides some background information like the versions of Safari and macOS, and which demo you have tested? Also, have you checked the web console for any error messages?

[flekschas]

FYI, MDN confirmed my suspicion that Safari iOS is not supporting EXT_float_blend anymore and merged my PR. Hence, there is not much one can do at the moment. The only option I see at this point is to remove the usage of EXT_float_blend on Safari iOS. However, I am not sure when I find time to get to it. In the meantime, I might add a visual indicator so users know when regl-scatterplot is expected to not work.

[phinoda]

No. As far as I know, on iOS you really only have one browser rendering engine, which is WebKit. Chrome on iOS is really only a different UI on top of the same rendering engine that's powering Safari. So I am not surprised that it's not working on iOS Chrome.

Makes sense!

This seems to be a different issue and unrelated to Safari iOS. regl-scatterplot works fine for me in Safari (v16) on macOS (v12.6). Could you open a new issue and provides some background information like the versions of Safari and macOS, and which demo you have tested? Also, have you checked the web console for any error messages?

I've opened a new issue here.

[flekschas]

I am closing this issue for now as MDN confirmed that Safari on iOS simple does not support the required WebGL extension anymore. This is unfortunate but there isn't really anything I can do.

To indicate whether all WebGL extensions are supported or not I've added a prop called isSupported in v1.3.2. Using that prop the demos will display an error message accordingly. E.g., see the screenshot below

[phinoda]

Sounds great. Thanks for adding the prop @flekschas !!