Mapbox-gl-js: Stretchable images inc. example not working in Mac OS Safari & Firefox, Chrome OK

Created on 10 Dec 2020 · 5Comments · Source: mapbox/mapbox-gl-js

v2.0.0. Appears to work correctly in v1.12.0, broken in v1.13.0

https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable/ and my maps using stretchable images display correctly in MacOS Chrome 87, marker images not visible in Safari 14.0.1 or Firefox 83.0. Dev consoles report invalid "stretchX", "stretchY" and "content" values, no errors in Chrome.

bug

Source

ashleyclough

Most helpful comment

Should be fixed by #10230, included in the v2.0.1 coming out this week.

mourner on 21 Dec 2020

👍3

All 5 comments

Looks like the same issue I had at https://github.com/mapbox/mapbox-gl-js/pull/10119#issuecomment-741503586 but I could never replicate it into a standalone repro. For me it was any client side images, not just stretchable ones.

I thought I still saw the issue on v2, but I'll need to re-test that.

andrewharvey on 11 Dec 2020

Similar issue here, where the overlay image does not render on Firefox (v 83) and Safari (v 14.0.1), but works fine on Chrome (v 87).
I have my own example where this is an issue, but I realized it occurs even on the map from documentations.

smonadjemi on 12 Dec 2020

Confirmed! There's also an error in the console saying Error: out of range source coordinates for image copy. Will investigate, thanks for the report!

mourner on 14 Dec 2020

👍2

Should be fixed by #10230, included in the v2.0.1 coming out this week.

mourner on 21 Dec 2020

👍3

@mourner I'm still seeing this issue using v2.1.1 in Firefox (86.0.1) and Safari (14.0.3) using this example -