Bootstrap 2.3.2 ".hide" class breaks modal body in Firefox

I have a <iframe>bootstrap modal window in the modal body. A Google map will be displayed on <iframe>, but not on an external "scheduler" that uses facebook markup. It displays correctly in all modern browsers except Firefox.

If I remove the class .hidefrom the parent div, it will work. HOWEVER, deleting a class .hidecauses an invisible modal to hide elements on the page.

Is there a way around this bootstrap class .hideto collaborate in this scenario OR is there a suitable fallback?

<div id="modal01" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Scheduling Options</h3>
    </div>
    <div class="modal-body">{loadposition schedule-wrapper}</div>
    <div class="modal-footer"><button class="btn btn-blue" data-dismiss="modal" aria-hidden="true">Close</button></div>
</div>