マップがズームされているときにサークルがモバイルで消えます

Question

PCで地図をズームすると、円がうまくレンダリングされ、完全に機能します。しかし、モバイル（iOS）で地図を表示しようとすると、円は最初からうまくレンダリングされますが、画面をズームまたはパンすると、（いくつかのやりとり後に）画面が消えます。一部のサークルはレンダリングされません。さらに、ツールチップは接触しても表示されません。私が紛失しているものはありますか？解決策を探しているうちに、私はこの行動を説明するものを見つけることができませんでした。

ご協力いただきありがとうございます。コードcodepenにある - http://codepen.io/kvyb/pen/VPqWNR?editors=0010

HTML

<!--D3 --> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> 
<!--Leaflet/Mapbox --> 
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> 

<!--Div to hold the map. Inline styling is horrible I know, it's just for demo purpose... --> 
<div id="map" style="position: absolute; height: 100%; width: 100%;"></div> 

CSS

div.tooltip { 
    position: absolute;   
    text-align: center;   
    width: 60px;      
    height: 28px;     
    padding: 2px;    
    font: 12px sans-serif;  
    background: lightsteelblue; 
    border: 0px;   
    border-radius: 8px;   
    pointer-events: none;   
} 

JS

// Map details 
// Define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw'; 
var map = L.mapbox.map('map', 'mapbox.streets').setView([53.4072, -2.9821], 14); 

// Sample Data 
var data = [ 
    {"coords": [53.3942, -2.9785]}, 
    {"coords": [53.4082, -2.9837]}, 
    {"coords": [54.4082, -2.9837]}, 
]; 

// Loop through data and create d.LatLng 
data.forEach(function(d) { 
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]); 
    //blue rings around circles: 
    map.addLayer(L.circle([d.coords[0], d.coords[1]], 0)); 

}); 

// Append <svg> to #map 
var svg = d3.select(map.getPanes().overlayPane).append("svg") 
    .attr("class", "leaflet-zoom-animated") 
    .attr("width", window.innerWidth) 
    .attr("height", window.innerHeight); 

// Append <g> to <svg> 
var g = svg.append("g").attr("class", "leaflet-zoom-hide"); 

// Append <circle> to <g> 
var circles = g.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .style("fill", "rgba(255, 255, 255, .7)") 
.on("mouseover", function(d) { 
      d3.select(this).style("cursor", "default") 
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html("formatTime(d.date) ++ d.close") 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      }) 
.on("touchstart",function(d) { 
      d3.select(this).style("cursor", "default") 
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html("formatTime(d.date) ++ d.close") 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      }) 
    .on("touchend", function(d) {  
       div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }) 
     .on("mouseout", function(d) {  
       div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 


function update() { 
    translateSVG() 
    circles.style("stroke", "gray") 
    circles.attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x; }) 
    circles.attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y; }) 
    circles.attr("r", "30") 
} 

// Adjust the circles when the map is moved 
function translateSVG() { 
    var viewBoxLeft = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.x; 
    var viewBoxTop = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.y; 
    // Reszing width and height incase of window resize 
    svg.attr("width", window.innerWidth) 
    svg.attr("height", window.innerHeight) 
     // Adding the ViewBox attribute to our SVG to contain it 
    svg.attr("viewBox", function() { 
     return "" + viewBoxLeft + " " + viewBoxTop + " " + window.innerWidth + " " + window.innerHeight; 
    }); 
    // Adding the style attribute to our SVG to transkate it 
    svg.attr("style", function() { 
     return "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);"; 
    }); 
} 

// Re-draw on reset, this keeps the markers where they should be on reset/zoom 
map.on("moveend", update); 
update(); 

Answer 1

私はあなたのSVGのが原因で、これらの要素のCSSのdissapearingていると思うがデフォルトのセットでありますoverflow: hidden。あなたはそれのためのメタを設定するために覚えてなかった、モバイルデバイス上のアプリの動作について

function translateSVG() { 
... 
svg.attr("style", function() { 
     return "overflow: overlay;" + 
      "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);"; 
}); 
} 

---

：あなたはsvg.attrのためにあなたのJSコードでオーバーフローにオーバーレイを設定してみてください？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

デバッグする価値のある別のものは、モバイルデバイス上のマップがクリックで応答する場合もあります。例えば、単純なアラートで関数を作成し、マップ上のタップがアラート機能を起動しているかどうかを確認します。

私はこの問題を持っていなかったが、私はこのような状況で、あなたのマップを含むDIVに次の属性を追加すると便利であり得ることをお読みください。

data-tap-disabled="true"