OpenStreetMap Click event after moving container

Question

I recently got aware of a bug in the OSM map:

the map click event seems to trigger at the wrong coordinates if the map div is moved. how would i workaround this problem? i can't guarantee the map div to be fixed, because the site's content may change while the map is shown.

As far as i searched google and stack overflow, i seem to be the only one experiencing that problem...

Here's a fiddle: http://jsfiddle.net/W3f6L/

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

even the simple setup of the fiddle

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

with js

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

will reproduce the error.

also pretty odd is, that if you click the clickme and then use the scrollbar to move down, the error vanishes (tough that only happens in the fiddle, i already tried to reproduce this behaviour in the site...)

[EDIT] solution,a bit more generalized than unknown's answer, but based on it....in case someone else stumbles upon a 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 is scrollable, containing the map div
    if(lastScroll == null) lastScroll = jQuery("body").scrollTop(); 

    var newPos = o.position(); //getting values at this 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 one of the values has changed, the map needs to be updated
        map.updateSize();                               
    }

    //reset values for next run
    lastPos = newPos;
    lastOff = newOff;
    lastScroll = newScroll;
},200); //the smaller, the more computing, the bigger the more delay between changes and the map update

Answer 1

You need to update map size using an API updateSize. Try this:

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

DEMO