"An error occurred trying to load the resource" - error in network tab when no visible missing tile

Vasilia-Themis commented 1 month ago

Checklist

[X] I've looked at the documentation to make sure the behavior isn't documented and expected.
[X] I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
[X] I've searched through the current issues to make sure this hasn't been reported yet.
[X] I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

Bug reproduced on a number of different iOS devices Unable to reproduce on Android or desktop

Go to https://leafletjs.com/ on mobile iOS Safari
Use Safari dev tools to monitor network traffic (how to do this on mobile - https://www.headspin.io/blog/tips-and-tricks-for-using-inspect-element-on-ios)
Go to the example map and pan around a lot quickly zooming in and out
In the network tab you will see: data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= or similar
The preview will say "An error occurred trying to load the resource"

Expected behavior

I do not expect to see "An error occurred trying to load the resource" in the dev tools network tab

Current behavior

In the network tab you will see: data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= or similar
The preview will say "An error occurred trying to load the resource"

Minimal example reproducing the issue

https://plnkr.co/edit/YiUS1lMzYAIZwLUs?preview

Environment

Leaflet version: Leaflet 1.9.4
Browser (with version): Safari iOS 16.2
OS/Platform (with version): iOS 16.2

IvanSanchez commented 1 month ago

That URL is the one for a 1x1 transparent gif image (gosh, knowing that fact makes me a nerd). In the leaflet codebase it lives at L.Util.emptyImageURL, and is set into tiles at:

https://github.com/Leaflet/Leaflet/blob/39ce11753b6bc193d9fc91c676d3f2acc1dbec90/src/layer/tile/TileLayer.js#L242

It has no ill effect besides that warning. It's done for historical reasons: destroying a non-completely-loaded HTMLImageElement used to crash the Android stock browser. See https://github.com/Leaflet/Leaflet/issues/137 and https://github.com/Leaflet/Leaflet/pull/5615 .

Not sure if we want to revisit this?

Vasilia-Themis commented 1 month ago

Thank you for the quick reply @IvanSanchez. It seems to be linked with the publishing of a tileerror event on the TileLayer, which is causing us problems. This only happens intermittently so I'm not confident of the link. Does that sound plausible?

IvanSanchez commented 1 month ago

But this is a non-issue anyway. The Safari dev tools are failing to display an image coming from a data: URL, which is different than "an image is causing an error" (since there are no errors/warnings in your console anyway).

If you have something about tileerror, then that's a different issue. Let's stick to this one.

Leaflet / Leaflet