iOS 15.4 Webgl via Metal issue

[jeroenvheel]

Describe the bug
The Webgl layer is not panning / zooming with the map.
In iOS 15.4 the Webgl via Metal is enabled by default.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://viewer.bomenwacht.nl/?code=935771DB2CB1AF76AD30B1B4345405E2 with a iOS device.
2. Try to pan / zoom te map

Expected behavior
When you turn off Webgl via Metal in the experimental features the Webgl layer is panning / zooming again with the map.

[ahocevar]

The official OpenLayers examples work fine on iOS 15.4. Maybe you are using an older version of OpenLayers, or there is something in your code which causes that behavior.

[v4lli]

@ahocevar I can confirm that, since iOS 15.4, some WebGL TileLayers are broken. The official WebGL Sea Level example is one example of this:

As noted by @jeroenvheel, disabling "Webgl via Metal" in the Safari advanced settings fixes this (I think it has become the default since iOS 15.4).

Also reproducible with macOS Safari since updating to 12.3.

[jeroenvheel]

@ahocevar @v4lli also the Layer swipe example is broken on iOS 15.4

https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

[jeroenvheel]

I did not found any error in the console wile debugging my iphone / ipad

the way i create the Webgl layer is like this.

    private _createInspectionLayers(): void {
        this._inspectionSource = new VectorSource();
        this._inspectionLayer = new WebGLPointsLayer({
            source: this._inspectionSource,
            style: {
                symbol: {
                    symbolType: 'image',
                    src: this._layerStyleService.toInspecStyle,
                    size: ['interpolate', ['exponential', 2.4], ['zoom'], 2, 1, 30, 55],
                    rotateWithView: false,
                    offset: [0, 0]
                }
            },
            disableHitDetection: false,
            zIndex: 5
        });
        this._inspectedSource = new VectorSource();
        this._inspectedLayer = new WebGLPointsLayer({
            source: this._inspectedSource,
            style: {
                symbol: {
                    symbolType: 'image',
                    src: this._layerStyleService.inspectedStyle,
                    size: ['interpolate', ['exponential', 2.5], ['zoom'], 2, 1, 23, 45],
                    rotateWithView: false,
                    offset: [0, 0]
                }
            },
            disableHitDetection: false,
            zIndex: 4
        });
    }

for the src property i create a dataUrl and cache it in the property inspectedStyle

  protected _circleStyle(outerColor: string, innerColor: string, innerRadius = 14): string {
    const canvas = document.createElement('canvas');
    canvas.setAttribute('height', '40px');
    canvas.setAttribute('width', '40px');
    const ctx = <CanvasRenderingContext2D>canvas.getContext('2d');

    // start outer
    ctx.beginPath();
    ctx.arc(20, 20, 18, 0, 2 * Math.PI);
    ctx.strokeStyle = outerColor;
    ctx.fillStyle = outerColor;
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    // start inner
    ctx.beginPath();
    ctx.arc(20, 20, innerRadius, 0, 2 * Math.PI);
    ctx.strokeStyle = innerColor;
    ctx.fillStyle = innerColor;
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    return canvas.toDataURL();
  }

[ahocevar]

Thanks for reporting all findings so far. Looks like it only happens when style expressions are used. Will be hard to investigate this further. Maybe it's something in OpenLayers, maybe it's a Safari problem. I can reproduce it on iOS, but not on MacOS.

Any help with this, any pointers, are appreciated!

[jahow]

Not an isolated problem at least: mrdoob/three.js#23733

[bunnybones1]

In theory you'll see this issue in Safari in Monterey, on M1 macbooks too, where we also found the issue to show up.

[tschaub]

It might be worth seeing if the issue goes away with preserveDrawingBuffer = false. If so, we could disable this on iOS Safari 15.4.

[tschaub]

@jeroenvheel @v4lli - Can you check to see if these examples work or not:

• https://deploy-preview-13492--ol-site.netlify.app/examples/webgl-layer-swipe.html
• https://deploy-preview-13492--ol-site.netlify.app/examples/webgl-sea-level.html

[ahocevar]

For me, these do not work on iOS 15.4 (iPhone 13 mini)

[v4lli]

@tschaub They do not, sadly (neither iOS 15.4 iPhone 11 Pro nor macOS 12.3 M1 MBP).

[tschaub]

Same here (just upgraded). I’ll try another approach.

[tschaub]

I've updated #13492 to use antialias: false for Safari 15.4. This makes the WebGL examples work for me on iOS 15.4 and macOS 12.3 M1.

If a fix for https://bugs.webkit.org/show_bug.cgi?id=237906 (or related issues) is not in before our next release, we may want to expand the check to include 15.5.

[jeroenvheel]

@tschaub Thanks for the fix

[v4lli]

Thanks for the fix guys, you're the best 🥰

Just a small note for everyone finding this via Google etc: the fix for #13492 is not automatically applied if you're using OpenLayers inside a WkWebView since the User Agent string reported by the the WebView (Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148) is slightly different from Mobile Safari's (Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1), and thus does not set SAFARI_BUG_237906 to true.