Safari 10 / OS X (Retina) sometimes doesn't render symbol layers

[dnapolloteam]

mapbox-gl-js version:
0.35.1

Steps to Trigger Behavior

1. Open mapbox gl js on safari with init level zoom < 2
2. Zoom to lower level.
3. Reload 1 more time name of all countries and streets don't show on map (issue just happen on safari)

Expected Behavior

All name of streets and coutries will show for all init level zoom on safari.

Actual Behavior

All name of streets and coutries didn't show for all init level zoom < 2 on safari.

[mourner]

Confirmed, with OS X Safari 10.0.3. That's weird...

[ashleyclough]

@mourner this sounds very similar to the issue I reported at #4561: problems with text rendering in v0.35+ in Mac OS Safari 10.1 (initially I thought it was to do with additional layers but I've tracked it to text layers in exiting styles).

I've kept testing, stripping everything back to just a single style:

v0.34.0 test, all text renders:
https://parallel.co.uk/text-test/index-v34.html

v0.35.1 test, no text renders though sometimes on a refresh it does:
https://parallel.co.uk/text-test/index.html

All render fine in anything other than Safari. @anandthakker thought it may be a timing issue?

[mourner]

@ashleyclough thanks for the new test case! Wow. Trying it out and for me, it only has no labels occasionally, after many reloads — most of the time, they show in both versions. There's definitely some Safari bug crawling here, but our task is to figure out whether we can prevent the bug from triggering.

[dnapolloteam]

Is there some update about this issue?

[lbud]

Investigated this yesterday/today. This appears related to https://bugs.webkit.org/show_bug.cgi?id=171359, so I started eliminating draw types.

The following configuration is the minimum I've been able to use to reliably reproduce this, all default paint/layout properties unless noted:

fill layer
line layer
  - line-dasharray
symbol layer

• Eliminating the fill layer causes symbols to show (but only by modifying the stylesheet and refreshing the page, not by setLayoutProperty('water', 'visibility', 'none') — this hides the fill layer but the symbols still are not rendered, even in following frames)
• Eliminating the line-dasharray property does the same (needless to say, eliminating the whole layer does as well)

Here's a fiddle that (on Safari) demonstrates this bug — comment/uncomment the fill visibility line or the line-dasharray line and re-run the fiddle to reproduce.

I'll continue to investigate whether we can tweak anything about the shaders to work around this bug without changing the visual outcome, but hopefully this'll get fixed upstream soon 🙏

[ashleyclough]

@lbud all my maps still seem to work without any issues providing I don't go past v0.34.0, even the Mapbox demo map at https://api.mapbox.com/styles/v1/mapbox/streets-v9.html?title=true&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA#2.57/45.71/22.71 is failing in Safari.

[jasonbarry]

@ashleyclough same here. I've pegged my project at 0.34.0 until this issue is resolved.

[gmaclennan]

Just to add another to the list here of it not working: http://lab.digital-democracy.org/lagarto-cocha-map/#13.48/-0.4871/-75.3352 source code: https://github.com/digidem/lagarto-cocha-map/

This does work in Safari Technology Preview Release 28 (Safari 10.2, WebKit 12604.1.17)

If this is a Safari bug it would be nice to have a workaround until users update Safari.

[tgecho]

This bug appears to affect Safari 9 and non-retina screens, so I don't think we can depend on an upstream fix to help all affected users :(

[lbud]

Thanks for the info @ashleyclough @jasonbarry @gmaclennan!
I've been able to bisect this to 13363a2 .

@gmaclennan interesting that you mention this works in Safari Technology Preview Release 28 — I'm testing it in Release 29 (Safari 10.2, WebKit 12604.1.19.0.1) and it is not working 🤔 (both with the map you linked to, and the default Mapbox Streets map initializing at low zooms), nor is it fixed in the current nightly WebKit build (r216190) (the minimal test case from the Webkit bug is also still not fixed). @tgecho thanks for your note — I also had downloaded Webkit back to 211670 (Feb 4) and this bug persists there, so it's definitely not a new Webkit bug, rather one that MBGL may not have surfaced until 13363a2.

I'm trying to figure out if there's anything we can change in the symbol shaders to avoid this bug, though not being a Webkit developer/without a bug diagnosis it's more or less blindly poking around in the dark.

[jfirebaugh]

I recently noticed that Firefox prints the following warning:

Error: WebGL warning: Drawing without vertex attrib 0 array enabled forces the browser to do expensive emulation work when running on desktop OpenGL platforms, for example on Mac. It is preferable to always draw with vertex attrib 0 array enabled, by using bindAttribLocation to bind some always-used attribute to location 0.

Turns out this also bisects to 13363a2. I bet it's related.

[ashleyclough]

Is it of any significance that a style that fails to render in Safari post v0.34.0 always seems to render consistently in the Mapbox Studio editing environment?

UPDATE: Or at least that's what seemed to be the case until today (8 May) - now I can no longer edit symbols in Mapbox Studio in Safari.

[dagjomar]

I'm experiencing this issue as well, on all my symbol layers across all sources.
Safari 10.1 (11603.1.30.0.34) on OS X 10.11.6

Had to downgrade to MBGL 0.34.0 to make things visible again :/

[dnapolloteam]

Many thanks for all support. I already downgrade version to 0.34.0 It work well. Many thanks again.

[ChrisLoer]

I saw the same behavior on Firefox 45.9.0 and 51.0.1 running OS X 10.12.5.

[lbud]

@ChrisLoer on current master or the last release?

[ChrisLoer]

@lbud versions .35, .36, and .37, sorry about the ambiguity. Everything looks good on master.

[lbud]

This fix went out in v0.38.0, released today.

[ngoctiennet963]

I will fixed it by

• load image symbol before event map load -> for resolve this issue

ps: version mapbox-gl/2.6.1/mapbox-gl.min.js