javascript - OpenStreetMap Click event after moving container -

i got aware of bug in osm map:

the map click event seems trigger @ wrong coordinates if map div moved. how workaround problem? can't guarantee map div fixed, because site's content may change while map shown.

as far searched google , stack overflow, seem 1 experiencing problem...

here's fiddle: http://jsfiddle.net/w3f6l/

(set pointer => click "clickme" => try set pointer again) 

even simple setup of fiddle

<div id="clickme">clickme</div> <div id="mapdiv"></div> 

with js

$("#clickme").click(function(){     $(this).css("height","200px"); }); 

will reproduce error.

also pretty odd is, if click clickme , use scrollbar move down, error vanishes (tough happens in fiddle, tried reproduce behaviour in site...)

[edit] solution,a bit more generalized unknown's answer, based on it....in case else stumbles upon similar problem:

setinterval(function(){     //map container jquery object...     var o = jquery(map.div);      if(lastpos == null) lastpos = o.position(); //initally set values     if(lastoff == null) lastoff = o.offset();      //body or whatever div scrollable, containing map div     if(lastscroll == null) lastscroll = jquery("body").scrolltop();       var newpos = o.position(); //getting values @ time     var newoff = o.position();      var newscroll = jquery("body").scrolltop();      if(lastpos.top != newpos.top ||          lastpos.left != newpos.left ||         lastoff.top != newoff.top ||          lastoff.left != newoff.left ||          lastscroll != newscroll){          //if 1 of values has changed, map needs updated         map.updatesize();                                    }      //reset values next run     lastpos = newpos;     lastoff = newoff;     lastscroll = newscroll; },200); //the smaller, more computing, bigger more delay between changes , map update 

you need update map size using api updatesize. try this:

$("#clickme").click(function(){     $(this).css("height","200px");     map.updatesize(); }); 

demo