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

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.

tbicr tbicr · Accepted Answer · 2013-05-21T15:57:50

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.

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

1 Answers