score:1

Accepted answer

I think your svg's are dissapearing because of css of these elements is by default set to overflow: hidden. You can try to set overflow to overlay in your js code for svg.attr:

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

About the app's behaviour on mobile devices, did you remember to set the meta for it?

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

Another thing worth to debug is that if your map on mobile device even responses on clicks. In example, create function with simple alert to check if your taps on map are fireing your alert function.

I didn't have this problem, but I read that in this situation it may be helpful to add the following attribute to the div containing your map:

data-tap-disabled="true"

Related Query

More Query from same tag