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, 2019 at 16:32
  • Yes, same problem. May 22, 2019 at 16:42
  • What does debugger say? Are all the tiles fetched OK (200)?
    – TomazicM
    May 22, 2019 at 16:53
  • Yes, FIles are completely fetched ok May 22, 2019 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, 2019 at 19:31


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.