My PWA (using Leaflet 1.5.1) is currently running (since 2 years) on Android and iOS without problems, until iOS 12 was released. From that point on I have very weird issues on iPhone and iPad.

Main problem is that image overlays are not fully rendering on iOS devices.

I am setting up an array of overlays:

ovl = loadOverlay(url);
where loadOverlay() is:

function loadOverlay(imgurl) {
    bounds = new L.LatLngBounds(
        new L.LatLng(30, -10),
        new L.LatLng(50, 36)

    var ovl = new L.ImageOverlay(imgurl,
        bounds, {
            pane: 'imagebg',
            attribution: "my attribution"
    return ovl;

Then, each overlay is displayed this way:

startMap() {
 mymap = new L.Map('CopMap', {
 maxZoom: 6.50,
 minZoom: 4.75,
 zoomSnap: 0.25,
 zoomDelta: 0.25,
 zoomControl: false,
 maxBounds: [
        //south west
        [32.5, -4.],
        //north east
        [46.8, 31]
        crs: L.CRS.Simple
    mymap.setView([41.5, 13], 5.25);

    mymap.getPane('imagebg').style.zIndex = 1;


This is working fine on Android, while in iOS the image is not fully rendered (not always, but very often). I have checked that the image file is correctly downloaded in the cache, but not fully displayed

  • Can you try to run app as HTML code in browser? – TomazicM May 22 at 16:32
  • Yes, same problem. – Fabio Marzocca May 22 at 16:42
  • What does debugger say? Are all the tiles fetched OK (200)? – TomazicM May 22 at 16:53
  • Yes, FIles are completely fetched ok – Fabio Marzocca May 22 at 19:17
  • Then there must be some timing problem when displaying tiles. Only solution then is to use leaflet-src.js and a lot of debugging with use of console.log. And maybe reporting irregular behaviour at github.com/Leaflet/Leaflet/issues – TomazicM May 22 at 19:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.