I've found a workaround. It appears that IE has some rendering bugs
that collapses content in certain situations. The workaround I've
found is to set the IE-specific zoom style to 1 on elements that
exibit this behavior. The trick is that this needs to be applied
after the new divs are injected into the body. I added the following
onShow function when opening the modal:
$("#dialogContent").modal({
overlay:80,
overlayCss: {backgroundColor:"#000"},
containerCss: {'background-color':'#fff', 'padding':'5px',
'border':'2px solid black'},
onShow:function (dialog) {$("body").css({zoom: '1'});}
});
And that fixes the issue.
In this case, the rendering bug only seems to happen when content is
injected into the DOM. I ran a test by exporting the realized DOM
after simplemodal rendered the overlay (without the zoom fix applied)
and saved the the content as a static page. When loading this page,
everything rendered correctly.
I'm not sure if you want to integrate the above IE fix into the
simplemodal code, but at least if someone else hits this issue, a
solution exists!
Eric
