[Bug] Rendering accuracy issues on iOS 17 / MacOS 14.0 (Sonoma) devices

[kade-robertson]

Description

We're running into some issues with incorrect rendering of pretty much all geometry on iOS 17 / MacOS 14 devices. Objects that should be curved are "stair-stepping", and lots of geometry is displayed out of alignment from where we'd expect it to be displayed. We've been able to reproduce this on multiple devices and OS versions:

• iPad Pro (2020) on iPadOS 17.2 beta (21C5029g)
• M2 Macbook Pro on MacOS 14.0, working in Chrome 118.0.5993.117 (Official Build) (arm64) and Firefox 119.0 (64-bit), but Safari 17.0 (19616.1.27.211.1) showed issues.
• Same M2 Macbook Pro on MacOS 14.1, working in Firefox but broken in Safari 17.1 (19616.2.9.11.7) and Chrome.

This is supposed to be a MultiLineString containing a single line with 25 points along it, forming a ~90 degree arc.

Flavors

• [ ] Script tag
• [X] React
• [ ] Python/Jupyter notebook
• [ ] MapboxOverlay
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] ArcGIS

Expected Behavior

The same MultiLineString rendered in Firefox on a non-MacOS device:

Steps to Reproduce

Repo that reproduces the issue: https://github.com/kade-robertson/line-arc-bug

Using Node >= 16 and Yarn 1, run yarn install then yarn dev.

We have a Codesandbox that (may) be working as well: https://codesandbox.io/p/github/kade-robertson/line-arc-bug/master

Environment

• Framework version: [email protected]
• Browser: Safari >= 17.0
• OS: iOS >= 17.0, MacOS >= 14.0

Logs

No response

[ibgreen]

I suspect none of the current maintainers have made the jump to the latest MacOS yet which is why you are not seeing a big response.

I would expect that tinkering with the PathLayer shader would be required, to see what is triggering this. Sometime it is specific statements or even just the order of statements in a shader that cause issues on some platform. That was certainly the case with the recent Samsung S22 fix.

The bad news is that the PathLayer shader is by far our most complex shader, so it could be a bit of work to narrow this down.

If you see it in other layers that will add more clues.

[kade-robertson]

For what it's worth, we've been able to work around this on our end with the following layer extension:

import { LayerExtension } from 'deck.gl';

class ShaderExtension extends LayerExtension {
	getShaders(extensions: any) {
		return {
			...super.getShaders(extensions),
			inject: {
				'vs:#decl': `
                    invariant gl_Position;
                `,
			},
		};
	}
}

export default ShaderExtension;

Which we just added to all of our layers, and this seemed to fix the problem. I don't think we know enough about how all of this ties together on deck.gl's end to know that this is the ideal fix or if there's any side effects we're not considering. We found this out from this luma.gl ticket: https://github.com/visgl/luma.gl/issues/1764 and the referenced webkit ticket: https://bugs.webkit.org/show_bug.cgi?id=237434

Also as a note from the initial report -- the Chrome versions which were experiencing issues were instances where the browser was using the Metal ANGLE backend. When switching to the OpenGL backend, the issue was resolved.

[Pessimistress]

Duplicate of #8127

[kade-robertson]

I'm not sure I understand why this issue is closed as a duplicate of a ticket that was self-closed, when this issue still happens today. It was only mentioned as resolved in Chrome, which as discussed earlier can be fixed by switching the ANGLE backend there, which you cannot do in Safari.

[joshshep]

I would say switching ANGLE to OpenGL is a workaround not a fix. It seems to me the fix should be to add "invariant gl_Position;" to modules/core/src/shaderlib/project/project.glsl.ts .

I put together this jsfiddle https://jsfiddle.net/ou963tr1/ which others may find useful. Toggling chrome://flags/#use-angle between OpenGL and Metal changes the bottom circles from being smooth to jagged.

[ricardoekm]

We're seeing the same issue with our customers here. It seems to affect all layers requiring precision. The following codepen demonstrates the issue: https://codepen.io/dfvlzcdq-the-flexboxer/pen/dyazJLB

Expected result:

On MacOS and iPad:

Versions tested: Safari 17.1 (19216.2.9.11.7) MacOS Sonoma 14.1.1

iPad Pro 2018 iPadOS 17.1.1

[FEJackFly]

Edge is normal. Chrome is abnormal

[felixpalmer]

I have tested (Chrome 123.0.6312.106, Mac M3) and the issue is fixed in [email protected], but still present in 8.9.34.

Going through the commits, the first commit which fixes the issue is https://github.com/visgl/deck.gl/pull/8454, which appears to be a very similar issue. @kade-robertson @joshshep @ricardoekm @FEJackFly can you please retest with the latest release?

FWIW adding invariant gl_Position; in project.glsl.ts also fixes the issue under 8.9.34, but I don't think it is necessary