Maps fail to render in Safari 15.1

[dwachsmuth]

Description

Basic deck.gl maps fail to render in the current version of Safari (15.1, on macOS Monterey 12.0.1).

Expected Behavior

Visiting a simple deck.gl sample project should show rainbow polygons drawn with deck.gl over the basemap: https://jsfiddle.net/symbolixau/on7432fj/70/

On Chrome 95, the polygons display:

On Safari 15, the polygons do not display:

Repro Steps

Visit https://jsfiddle.net/symbolixau/on7432fj/70/ on Safari 15 on macOS—the polygons should render, but they don't.

Environment

• Framework Version: Not sure—I'm new to direct interaction with deck.gl, and have only previously used it via the R bridge package {mapdeck}
• Browser Version: Safari 15.1
• OS: macOS 12.0.1

Logs

There are several errors in the console log. The one that seems potentially related is:

[Error] WebGL: INVALID_OPERATION: useProgram: program not valid
	useProgram
	useProgram
	(anonymous function) (dist.min.js:1:27002)
	value (dist.min.js:11:679774)
	value (dist.min.js:11:124252)
	value (dist.min.js:1:297787)
	(anonymous function) (dist.min.js:1:284768)
	value (dist.min.js:1:284444)
	value (dist.min.js:1:227841)
	value (dist.min.js:1:226382)
	value (dist.min.js:11:90594)
	value (dist.min.js:11:222856)
	value (dist.min.js:11:218101)
	value (dist.min.js:11:223593)
	value
	value (dist.min.js:11:196666)
	value (dist.min.js:11:193835)
	t (dist.min.js:11:195828)

This issue is a redirect from SymbolixAU/mapdeck#347 where I initially encountered it. The package maintainer of {mapdeck} thinks there is a compatibility issue between deck.gl and Safari.

[Pessimistress]

Some observations:

• I am able to reproduce this in 15.1 (MacOS 12).
• 15.0 (MacOS 11) works fine and so does 15.4 (Safari Technology Preview for MacOS 12).
• The above fiddle uses 8.1.0, though the latest release does not render either.
• Demos in the documentation pages work in 15.1.
• Another binary demo also works in 15.1.

I will look closer but if you could pinpoint what usage pattern caused the error it will be easier for us to identify a work around, and/or report the bug to WebKit.

[dwachsmuth]

It's a bit tricky, because I discovered this issue using the R package {mapdeck}, which is an R interface to Mapbox and deck.gl. I have no experience using deck.gl directly. But it appears that the entirety of mapdeck's deck.gl rendering fails to work in Safari 15.1. I have a bunch of projects using mapdeck with all sorts of polygons, points, lines, etc, and they all fail to render. This is the most minimal R code which produces the error—simply trying to draw basic polygons.

library(sf)
library(mapdeck)

nc <- st_read(system.file("shape/nc.shp", package="sf"))
add_polygon(mapdeck(), nc)

[Pessimistress]

the entirety of mapdeck's deck.gl rendering fails to work in Safari 15.1

Do you have an example of points that fail to render?

[dwachsmuth]

Here is a test project with points which renders fine on Chrome or Safari 15.4, but not 15.1:

https://mssi.shinyapps.io/lines_test/

I also tested lines (hence the project name), and they also fail to render.

[titivermeesch]

I'm having this issue as well with Safari 15.1

I see it has been reported on the Apple Developer Forums as well: https://developer.apple.com/forums/thread/688561
Is this something that can be fixed on deckgl side?

[Pessimistress]

@dwachsmuth Please share the source of your points/lines test app. We cannot debug minified script.

@titivermeesch At this point, it is unclear what usage triggers the failure, as most apps seem to work fine on 15.1. If you can share your code that triggers this issue, it would help us identify a fix.

[Pessimistress]

Update:

The fiddle in the original issue: https://jsfiddle.net/symbolixau/on7432fj/70/ is supplying too small of a buffer to getElevation. Changing binaryElevation to new Float32Array(10) fixes the rendering.

Using insufficient buffers for attributes results in a GL_INVALID_OPERATION during glDrawElements in Chrome and Firefox. But Safari just fails silently.

The "program not valid" error is due to the fiddle using an outdated version of deck.gl. There was a fix for Safari 15 in v8.5, see visgl/luma.gl#1490

[titivermeesch]

@dwachsmuth Please share the source of your points/lines test app. We cannot debug minified script.

@titivermeesch At this point, it is unclear what usage triggers the failure, as most apps seem to work fine on 15.1. If you can share your code that triggers this issue, it would help us identify a fix.

After updating to the latest version the issue fixed itself

[Pessimistress]

Looks like this is an issue resolvable by upgrading mapdeck to the latest release. @dcooley

Example in the original post has other issues unrelated to the library's compatibility.

Reopen if the problem remains.

[dwachsmuth]

Unfortunately my issue is still present in the current version of mapdeck. This is the minimal reprex in R to produce the issue:

library(sf)
library(mapdeck)

nc <- st_read(system.file("shape/nc.shp", package="sf"))
mapdeck() |> 
  add_polygon(nc)

Opening the localhost session works fine in Chrome or in Safari 15.4, but not in Safari 15.1.

[dwachsmuth]

(I also don't seem to be able to re-open the issue, but it is definitely still live on my end!)

[Pessimistress]

@dwachsmuth Please work with the author of mapdeck to upgrade its deck.gl dependency.