jquery - Leaflet fixed map double click feature not working properly in Firefox after scrolling -
the problem happens in firefox , ie, chrome , safari work great. have map leaflet in fixed position , when double click zoom on map , scrolled zooms without problem. but, when scroll down, zoom goes somewhere else (to south) , increments if scroll down deeper.
i can fix problem if remove doctype, not want that.
to reproduce problem, execute code in firefox, scroll down , double click on map zoom.
note: passed w3c validator, problem leaflet.
here 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 map on "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 example in jsfiddle: http://jsfiddle.net/ygaqm/ (remember, in chrome/safari works)
any appreciated.
i added dblclick handler http://jsfiddle.net/ygaqm/2/:
this.map.on('dblclick', function (e) { console.log(e); // debugger; }); and found e.containerpoint used zoom have different values different scrolling.
look @ l.domevent.getmouseposition 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 can try check method , replace code using e.clientx , e.clienty instead e.pagex , e.pagey: http://jsfiddle.net/ygaqm/3/.
i think because leafled not planned fixed position usage. example when scroll page map scrolled normal mode (as example on http://leafletjs.com/). when trying make fixed map doesn't scrolled page scroll (in case) scrolling still considered position detection.
Comments
Post a Comment