Embedding PDFs or other content into websites and web apps has become commonplace. Inevitably you will want to have menus that drop down over those PDFs or have some other element that can overlay the iframe that you place the PDF in.
Most browsers understand this desire and are happy to accommodate. Unfortunately, Internet Explorer in its many versions still does not handle this.
The Problem
IE renders an iframe over the rest of the content so that your other elements end up behind the PDF. This is especially troublesome for drop down menus like below.
 Dropdown before loading iframe |
 Dropdown after loading iframe |
The Solution
Other sites go on about positioning and z-indexes, but that is not going to solve your problem. The answer is a one line fix.
You must insert an empty iframe next to the element that needs to be on top of the real iframe. That’s all – see the example below if it sounds odd.
For whatever reason, adding multiple iframes forces IE to stack them properly and respect the z-indexes. This has been tested in IE 7, 8, 9, and 10.
Solid Tip: Check out this JS Fiddle in Internet Explorer to see it in action!
Update 05/24/2016: The JS Fiddle no longer loads the PDF in Internet Explorer. Here is an alternate test page I loaded up here at SolidlyStated.
The Example
<div id="container"> <div id="menu">place some content here that goes over the div</div> <iframe id="fake" src="about:blank"></iframe> </div> <iframe id="pdf" src="http://stlab.adobe.com/wiki/images/d/d3/Test.pdf" width="400" height="200"></iframe> |
I am facing issue even after applying those changes
Evan-
At least the JSFiddle gives good results in both Firefox and my IE 11.. a good sign.
I will try it with my application (after days of frustration), and report back.
1. Do you know when this hiccup started?
(I am sure I had my application working fine in IE8)
2. How did you come across the work-around?
3. Have you requested a proper fix from Microsoft?
Your remedy indicates clearly a problem with the code from Microsoft.
Possibly related issue:
In IE 11 my CSS and JavaScript were not OK.
I had to add “” to resolve.
It now seems like IE11 is breaking as IE6 did.
I look forward to your response..
With thanks,
W Hurford
William- that JS Fiddle actually NO LONGER works correctly in IE. The test PDF from Adobe no longer loads its content, even though the file hasn’t moved. Maybe a security issue. Works in other browsers just fine.
I created the test page locally with both those HTML and the PDF itself hosted here at SolidlyStated. Even IE Edge still has the problem and I am sure Microsoft is not going to do anything about it.
Not sure when it started, but I had to overcome it at the beginning of 2014. I discovered it on accident after many hours of struggling. I was attempting to use JS to build it dynamically and populate the iframe element and discovered that an empty iframe somehow made the renderer work as we intended. Client was very pleased.
Thanks, works well, as long as your menu is not fixed, that is my case. My menu bar is fixed top, so when I scroll the page the iframe with the pdf gets below it, but for some reason the area that matches between the menu and the iframe creates a white flash. Sadly I can’t give a live example of it. I think that both iframes are struggling for been on the top. I rely appreciate some help or advice.
I have a scenario where the header of the page has a calendar button and based on the date a pdf report is rendered in the page in an iframe.
When clicking on the calendar icon, the calendar promt hides behind the pdf which is already rendered.
I tried adding fake iframe as you suggested. But I can see the fake iframe being displayed over the pdf but the calender prompt still hides behind the pdf.
Please suggest.
This apparently doesn’t work with IE 11. I tried it, but only wound up with an empty square at the top of the page and no change to the behavior of the PDF.
If it makes any difference, I’m using hoverable drop-down menus, and they’re what’s getting caught behind the PDF.