jQuery-Mapael: Bug: problems when creating a map inside display:none element

This has been reported several times by users: #72 and #63

Here is a working example of the problem: http://jsfiddle.net/VqwUZ/361/ We hide the container, draw the map, then show the container. As a result, no text is visible on the legend, and the map is not set to the screen width (a resize of the window is needed to force redraw).

This is related to Raphael issue DmitryBaranovskiy/raphael#760

If you call getBBox() to get the bounding box of a text element when the whole Raphael element is hidden (e.g. if it is inside a <div> with display: none) then the properties of the returned object are all set to NaN rather than the actual bounding box values of the element.

My solution was to avoid using display:none and prefer using this kind of class:

.map_hide {
    /* display:none is doing some weird stuff on SVG
     * Solution: hide it, then position it far away
     */
    position:absolute !important;
    visibility: hidden !important;
    top:-1000px !important;
    left:-1000px !important; 
}

However, when using a CSS framework such as Bootstrap, you may not be able to change the behavior of certain element. I don’t know what we can do.