Whitescreen issue in IE9 - Removing iframe

Question

I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.

I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.

On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)

Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.

I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.

There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.

If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.

Tangleberry

Have you tried to check whether the browser renders the page in Quirks Mode? It could be related to how the box model is handled by the browser... – Salute

@Salute If quirks mode was the issue IE8 would have the same problem... or at least, should. – Brelje

Yep, I've just checked: it should... you're right. en.wikipedia.org/wiki/Quirks_mode – Salute

The only advice I can you give @apocalypse9 is to set some breakpoints in your code with the built in IE dev tools and step through it to see where it could be going wrong. If you have a live web page that you can post this example we might be able to help more – Brelje

have you tried using fiddler to check what is being communicated between browser and server during last step or via network tab from IE's developer toolbar. – Pash

Answer 1

Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.

It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.

One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.

In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.

I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.

Here is the fix-
Html:

<div id="container">
 <iframe src="loremipsum.pdf"></iframe>
</div>

Javascript:

//Ruins my entire week
$("#container").remove(); 

//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove(); 

Tangleberry

Obscure as heck, but I had the same issue, and your fix worked. Thanks! – Bouncer

I searched for an explination for hours before finding this answer. A very frustrating issue, and even finding the area in debugging it leaves questions as to why. This question was hard to find, but I am glad I did – Destiny

Hats off to you Kelly! We had this issue when using angular - we created document tabs as ng-repeat for tabs array. Closing a tab was done with splice on tabs, and this rendered the white page and got us to your issue. Using your method, we added jQuery and first removed the appropriate iframe, and then applied the splice -> the screen still renders white, but it returns to normal after 2 secs. Sheeeesh... what a bug... we're so happy we found your answer! – Rembert

Answer 2

I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.

Pseudo-code below:

$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
    $ctrl.removeIframe(); // remove the iframe here
});

Allx

Answer 3

As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.

Eutectoid

Unfortunately according to the DOM viewer there is nothing there - was hoping we just had a div over it or something but it is just nothing. – Tangleberry

That's actually useful data. It means that whatever it is is a logic flaw that causes your DOM to implode, rather than a rendering bug of some sort. – Eutectoid

Thanks for the info - looks like it was the adobe plugin crashing because I removed the element holding the iframe from the DOM (rather than the iframe itself) – Tangleberry