Layer previews not displaying correctly in Safari

[dankarran]

URL

https://www.openstreetmap.org

How to reproduce the issue?

In Safari, if you open the layers side panel, the layer previews don't show reliably. I noticed a similar issue in the Safari mobile browser as well. It works fine in Chrome.

Sometimes the last two will load initially, sometimes the others will load, but as soon as you hit a key or move the pointer, they all disappear. If on a smaller screen (e.g. if debugging tools open) then the map previews which weren't visible initially will actually show when you scroll down, and they still stay there, but the others will be blank.

Screenshot(s) or anything else?

https://github.com/user-attachments/assets/0b05c0d5-27d1-42ae-bc74-e475cdb22313

[danieldegroot2]

On mobile Safari the first three did not load for me.

[dankarran]

@danieldegroot2 same here, and it shows the same behaviour as with the smaller screen on desktop Safari - the previews fully shown on the screen don't load, and the ones which load out of view initially do work.

[mmd-osm]

I have the same issue even before vector tiles were rolled out. Sometimes they would load but once I touch the sidebar and start dragging, the first 3 layers immediately disappear from the preview window.

[dankarran]

If you change the size of the viewport, the layer previews magically re-appear once they're partially off screen, and disappear again when they're fully on screen.

https://github.com/user-attachments/assets/bb52b4fe-5953-4581-bcea-af4e57d41b80

Not sure if relevant, but when opening the layers side bar, a load of warnings get added to the console (which I don't see in Chrome), e.g.:

• Image "route_marker" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
• Image "null" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

[dankarran]

I've had a quick skim through recent changes in the code and I think this could be the issue:

https://github.com/openstreetmap/openstreetmap-website/blob/938212c429a159a1ceeec13b91c4ae966ef6663e/app/assets/javascripts/leaflet.key.js#L19

... should perhaps be .on instead of .one? Without that event firing, it looks like the following may not run:

https://github.com/openstreetmap/openstreetmap-website/blob/1b9e45fd7aaedc5e6519c54e1b89c5c7c8b253e0/app/assets/javascripts/leaflet.layers.js#L7-L10

Of course I could be completely wrong! If that is the issue though, it looks like there's a similar one at:

https://github.com/openstreetmap/openstreetmap-website/blob/1b9e45fd7aaedc5e6519c54e1b89c5c7c8b253e0/app/assets/javascripts/leaflet.share.js#L244

[mmd-osm]

For me, the following change made it work again. I guess there's some element which is conflicting in case of z-0. (Tested on Safari/iOS).

diff --git a/app/views/layers_panes/show.html.erb b/app/views/layers_panes/show.html.erb
index a1d63c7e1..18a8c78f7 100644
--- a/app/views/layers_panes/show.html.erb
+++ b/app/views/layers_panes/show.html.erb
@@ -1,7 +1,7 @@
 <div class="base-layers d-grid gap-3 p-3 border-bottom border-secondary-subtle">
   <% @base_layers.each do |layer| %>
     <div class="position-relative">
-      <div class="position-absolute top-0 start-0 bottom-0 end-0 z-0 bg-body-secondary" data-layer="<%= layer["layerId"] %>"></div>
+      <div class="position-absolute top-0 start-0 bottom-0 end-0 z-n1 bg-body-secondary" data-layer="<%= layer["layerId"] %>"></div>
       <input type="radio" class="btn-check" name="layer" id="map-ui-layer-<%= layer["layerId"] %>"></input>
       <label class="btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute p-0 h-100 w-100 overflow-hidden" for="map-ui-layer-<%= layer["layerId"] %>">
         <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">

[gravitystorm]

Just to say that I've also seen this problem, but I don't have any opinions on the approach for a fix.

@mmd-osm do you have any thoughts on the .one issue mentioned by @dankarran ? Does changing that fix anything?

[mmd-osm]

$ui.one is perfectly fine for jQuery (https://api.jquery.com/one/), and changing it to .on doesn't help.