Remove "Flash" between pages while using Internet Explorer modal boxes

Question

I have an internal web application, that is IE specific, and uses a lot of IE specific modal boxes: (window.showModalDialog).

I recently received a request to remove the "flash" when navigating between pages of the site. To accomplish this, I just added a meta transition tag to my master page:

<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />

This works perfectly except for the modal boxes. When you launch a modal box, and then move it around, the web page behind it keeps a trail of the modal box instead of re-drawing the web page content. This prevents the user from moving the modal box to read anything that was behind it.

Is there a way to prevent the "flash" between pages in an IE specific site and have the site still work with modal boxes?

Please note, this is a large and complex site, so re-architecting it to not use modal boxes isn't an option.

This is an asp.net, c# web application, and all of my users are using IE 7 and IE 8 if it makes any difference.

-Edit-

To duplicate this, put the following into an html page, and open it in Internet Explorer:

<html>
<head>
    <title>Test</title>
    <meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body>
<script language="javascript">
    window.showModalDialog('modal.htm', window);
</script>
</body>
</html>

Not exactly a cure, but a intermediate solution: try to manually redraw the page when user stops dragging the modal window - setting "zoom: 1" to the BODY tag. I suggest not to redraw the page while dragging - this would be an overkill to IE. Perhaps you could put up an example on jsfiddle.net so we can play around, and see if there's a fix. — Oskar Krawczyk
I updated my question with code that can be used to duplicate the issue. — AaronS

David Murdoch David Murdoch · Accepted Answer · 2010-04-13T14:27:10

Have you tried the solutions from this page? It says you need to add a <link /> element to the head section (if you have the unstyled content problem [not the white-page problem]).

Also from Yahoo's Best Practices:

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

Make sure you have a <link /> element in the head of all your pages and make sure that you put these stylesheets at the top of the head section and <script /> elements after them (preferably AFTER all page content and immediately before the closing tag).

I know you said you can't use modals but I thought I'd share this example of a JS modal using jQuery and facebox. You don't even have to modify your calls to "showModalDialog" (if you do end up using this modal method you can still use your meta page-exit page transition trick).

window.showModalDialog = function(a){
     $.get(a,function(html){
         $.facebox(html);
     });
};
window.showModalDialog('linkOnSameDomain.htm', window);

Remove "Flash" between pages while using Internet Explorer modal boxes

3 Answers