Проблема с карточкой листовки в Safari с использованием iPhone и iPad

Question

У меня возникла какая-то странная проблема с картой буклета с использованием Safari в iPhone и iPad. Я использую запрос AJAX GET для извлечения маркеров на карте и привязки всплывающего содержимого при извлечении. Во всплывающем окне у меня есть кнопка, которая открывает загрузочный модаль, когда пользователь нажимает на нее для просмотра деталей. Он отлично работает в Windows и Mac с помощью IE, Chrome, Safari, Firefox, но я не могу заставить его работать с браузером iPhone и iPad Safari. Вот мой код для извлечения данных:

$(function(e) { 
    var latlng = L.latLng(-30.81881, 116.16596); 
    var map = L.map('lmap', { 
     center: latlng, 
     zoom: 6 
    }); 
    var lcontrol = new L.control.layers(); 
    var eb = new L.control.layers(); 
    //clear the map first 
    clearMap(); 
    //resize the map 
    map.invalidateSize(true); 
    //load the map once all layers cleared 
    loadMap(); 
    //reset the map size on dom ready 
    map.invalidateSize(true); 

    function loadMap(e) { 
     //show loading overlay 
     $(".loadingOverlay").show(); 
     var roadMutant = L.gridLayer.googleMutant({ 
      type: 'roadmap' 
     }).addTo(map); 
     var satMutant = L.gridLayer.googleMutant({ 
      maxZoom: 24, 
      type: 'satellite' 
     }); 
     var terrainMutant = L.gridLayer.googleMutant({ 
      maxZoom: 24, 
      type: 'terrain' 
     }); 
     var hybridMutant = L.gridLayer.googleMutant({ 
      maxZoom: 24, 
      type: 'hybrid' 
     }); 
     //add the control on the map   
     lcontrol = L.control.layers({ 
      Roadmap: roadMutant, 
      Aerial: satMutant, 
      Terrain: terrainMutant, 
      Hybrid: hybridMutant //,Styles: styleMutant 
     }, {}, { 
      collapsed: false 
     }).addTo(map); 

     var markers = L.markerClusterGroup({ 
      chunkedLoading: true, 
      spiderfyOnMaxZoom: true, 
      maxClusterRadius: 80, 
      showCoverageOnHover: true 
     }); 
     //clear markers and remove all layers 
     markers.clearLayers(); 

     var st = atype + ""; 
     $.ajax({ 
      type: "GET", 
      url: appUrl + "/Home/map", // '@Url.Action("map", "Alerts")', 
      data: { 
       'atype': st 
      }, 
      dataType: 'json', 
      contentType: 'application/x-www-form-urlencoded', 
      success: function(data) { 
       $.each(data, function(i, item) { 
        var img = (item.IconUrl).replace("~", ""); 
        var Icon = L.icon({ 
         iconUrl: appUrl + img, 
         iconSize: [42, 42] 
        }); 
        var id; 
        var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { 
         icon: Icon 
        }, { 
         title: item.Name 
        }); 
        var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'>Details</a></div>"; 
        id = marker._leaflet_id; 
        marker.bindPopup(content); 
        markers.addLayer(marker); 
       }); 
      } 
     }).done(function() { 
      $(".loadingOverlay").hide(); 
      map.invalidateSize(true); 
     }); 

     map.addLayer(markers); 
     //set initial zoom 
     map.setZoom(6); 

    } 


    function clearMap() { 
     // clear all layers before it reloads; 
     map.eachLayer(function(layer) { 
      map.removeLayer(layer); 
     }); 
     map.removeControl(lcontrol); 
     map.removeControl(eb); 
    } 
    map.on('focus', function() { 
     map.scrollWheelZoom.enable(); 
    }); 
    map.on('blur', function() { 
     map.scrollWheelZoom.disable(); 
    }); 
}); 

У меня такая же проблема с контролем уровня карты. Ничего не происходит, когда пользователь нажимает на элемент управления для переключения на Arial или Terrian, когда он отлично работает в IE и других браузерах.

Любая помощь приветствуется.

Answer 1

Я подтверждаю, что Nasir является правильным. Благодаря!

В частности, я изменил в Leaflet.GoogleMutant.js следующую строку из

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000 

в

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000 

И теперь он работает.

Я не уверен, что это изменение влияет, хотя ... спасибо за комментарии

Луиджи

Answer 2

Я столкнулся с этой проблемой при тестировании своего приложения на устройствах iOS. Проблема заключается в том, что Safari не поддерживает pointer-events, как описано в разделе caniuse.com, а поскольку CSS-плагин googleMutant устанавливает значение z-index в 1000 с помощью класса CSS leaflet-top, браузер считает, что он расположен выше всего остального.

Это приводит к тому, что ваши клики и касания срабатывают на уровне googleMutant, а не на уровне управления.

Сброс значения z-index до более низкого значения, по меньшей мере, одного значения, которое ниже значения для уровня управления, должно устранить эту проблему. По крайней мере, это было для меня.