Is there a way for the HTML5 viewer to recalculate the attributes of parent elements when embeded?

I have a HTML5 viewer that I am embedding using an iframe. This iframe is placed within the body of a modal div. When the parent page loads the modal is initially set to display:none. The map loads up in the iframe in the background. When a user clicks a button on the parent page it will open the modal and run a specific workflow based on the button.

 

 

I have discover a small issue with doing this and some of the aesthetic elements of the map not displaying correctly, all linked to the one issue, the map being loaded in an iframe that basically has no height or width. Since the iframe is in a modal, and the modal is defaulted as display:none, when the map initialises it will calculate the extent based of the size of the parent element it's being displayed in and store this elements size for future use. Since anything with  display:none has a height and width of 0 the map stores this value for use in other operations, such as adding highlight and selections to the map(which won't display).

 

 

Is there are a command that will cause the viewer to recalculate this size or a property I can set with some javascript to pass the right parent element size attributes to the map?