Map is sometimes off-center when a place/landmark is selected

[goldpbear]

This bug has been around in Shareabouts for a while: sometimes (and often on initial page load), when a user selects a place or landmark on the map, the selected point will fail to center correctly after the map container resizes to accommodate the content panel. Interacting with the map will immediately correct the problem, but things look awkward in the meantime, especially with the spotlight clearly out of sync with the point it's supposed to be highlighting.

I had an idea about what might cause this bug. As explained in this stackoverflow post, there's a possible race condition between the CSS transition that resizes the map container, and a call to Leaflet's invalidateSize() method, which forces Leaflet to re-center the map when the map container dimensions have changed.

The solution suggested in the SO post is to call invalidateSize() inside of a short timeout. I tested this idea a bit, and so far have been able to avoid the off-center bug. But I'm also not able to reproduce it reliably in the first place.

@futuresoup -- I feel like you found a situation once (a specific flavor? A particular interaction?) where you could reliably reproduce this bug -- do you perhaps remember what that was?