Leaflet fixed map double click feature not working properly in Firefox after scrolling

StackOverflow https://stackoverflow.com/questions/16669255

Question

The problem happens in Firefox and IE, Chrome and Safari work great. I have a map with Leaflet in fixed position and when I double click to zoom on the map and I am scrolled up it zooms without problem. But, when I scroll down, the zoom goes to somewhere else (to the south) and it increments if I scroll down deeper.

I can fix the problem if I remove the DOCTYPE, but I do not want to do that.

To reproduce the problem, just execute the code in Firefox, scroll down and double click on the map to zoom.

NOTE: I passed the W3C validator, so the problem could be from leaflet.

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
        <style type="text/css">

    body {
        height: 4000px;
    }

    #map {
        position: fixed;
        width: 500px;
        height: 300px;
        top: 50px;
        left: 100px;
    }
    </style>
</head>

<body>

    <div id="map"></div>

    <script type="text/javascript">
    // Initialize the map on the "map" div
    map = L.map('map', {
        maxZoom: 18,
        minZoom: 12,
        zoom: 14,
        scrollWheelZoom: false
    });

    map.setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.cloudmade.com/12099dbdd2c7459d99b220fea3008f7d/997/256/{z}/{x}/{y}.png').addTo(map);
    </script>
</body>

Also, here is the example in jsfiddle: http://jsfiddle.net/yGaQM/ (remember, in Chrome/Safari it works)

Any help would be really appreciated.

Was it helpful?

Solution

I added dblclick handler http://jsfiddle.net/yGaQM/2/:

this.map.on('dblclick', function (e) {
    console.log(e);
    // debugger;
});

And I found that e.containerPoint which used for zoom have different values with different scrolling.

Look at L.DomEvent.getMousePosition where calculated e.containerPoint:

getMousePosition: function (e, container) {

    var body = document.body,
    docEl = document.documentElement,
    x = e.pageX ? e.pageX : e.clientX + body.scrollLeft + docEl.scrollLeft,
    y = e.pageY ? e.pageY : e.clientY + body.scrollTop + docEl.scrollTop,
    pos = new L.Point(x, y);

    return (container ? pos._subtract(L.DomUtil.getViewportOffset(container)) : pos);
}

So you can try check this method and replace it for your code to using e.clientX and e.clientY instead e.pageX and e.pageY: http://jsfiddle.net/yGaQM/3/.

I think this because leafled was not planned for fixed position usage. For example when you scroll page then map also will scrolled for normal mode (as example on http://leafletjs.com/). When you trying make it fixed map doesn't scrolled with page scroll (in your case) but scrolling still considered for position detection.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top