IE11 on windows 7 displays white screen after closing a div

Question

i have a div with iframe that loads pdf file. it will appear when the pdf icon is clicked and there's a label "X" that when clicked will hide the div (onclick event, just change display to block). But what happens is when trying to close the div, the loaded page was gone too, all you see is white screen. i have to press F12 to make the page appear again. The page runs in Firefox, Chrome and Safari as it should be, i have this problem or behavior in IE9-IE11 only. But the weird part is when i test the page using BrowserStack, everything is fine with the browserstack. Any idea on why this is happening?

<div class="pdf-file" style="display: none;"> 
    <label>X</label>
    <iframe src="blah" scrolling="no" width=400 height=400 class="pdf-class"></iframe>
</div>

Please note, the position of this div is absolute.

Onclick Event:

$('#pdf img).click(function() {
    $('.pdf-file').show();
}

$('.pdf-file label).click(function() {
    $('.pdf-file').hide();
}

the javascripts are as simple as the above, and the behavior just happens recently and i don't understand why and i can't remember changing something big in the page that made this behavior, it was working good before.

The div is hidden by a JavaScript call, then? Can you show the code responsible? — Kevin_Kinsey, Nov 21 '16 at 22:55

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

After searching more about the problem at hand, i came across this stackoverflow topic Blank iFrame in IE which gave me an idea that iframe might be my problem so i change iframe to object and that did the trick in IE. Hope this helps.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 23 '16 at 19:30

sd4ksb

241
1
4
16

score 0 · Answer 2 · answered Nov 22 '16 at 21:06

On an application I work on, we've just encountered this issue within the last few days. After much discussion, we figured out a stop-gap measure.

First, we had a few differences - our situation isn't as simple as the one above. We are loading PDFs into an iFrame, but that iFrame is in a UI Bootstrap modal. We were getting a WSOD when clicking the Cancel button on our modal, which cause the modal instance to dismiss, and also causes the modal itself to be removed from the DOM.

The work around was to go from this:

function cancel() {
    $uibModalInstance.dismiss('Cancelled.');
}

...To this:

function cancel() {
    var $modal = $('div.modal-dialog');
    $modal.css('display', 'none');

    $uibModalInstance.dismiss('Cancelled.');
}

It might be that, instead of calling $('.pdf-file').hide(), that you should instead do $('.pdf-file').css('display', 'none'); instead.

will try your work-around and will let you know... it's just weird that it was working before and not now... i re-installed my IE11 thinking it might be something to do with the browser but no luck.. — sd4ksb, Nov 22 '16 at 22:55
tried your work-around but it didn't do the trick. thanks for helping out. — sd4ksb, Nov 22 '16 at 23:03

IE11 on windows 7 displays white screen after closing a div

2 Answers2