Tuesday 19 February 2013

IE8, Filters and IFrames

Everyone loves supporting old versions of Internet Explorer right?

Well, I came across an odd "quirk" with IE8 and it took me a little bit of time to track it down.

The problem occurs when you use a DropShadow IE filter, an Alpha filter and an iframe. When you stick them all together, the iframe becomes totally transparent. Very odd.

Let me walk you through it.

So, the set up is that we have a normal page, that page consists of a div with a DropShadow and that div contains an iframe which loads a new page. In that page, we have an overlay which has a 100% transparency set. When you strip out all the complexity, you end up with two HTML pages that look a little like the below. I've given each page a background colour just to make the problem a little more obvious.

Main.html

<html>
<head>
<title>Top Window</title>
</head>
<body style="background-color: Green;">
<center>
The top window
<br />
<br />
<div style="position: absolute; top: 55px; left; 25px; z-index: 1">Some general text in the top level window</div>
<div style="border: 1px solid black; z-index: 2; position: absolute; top: 50px; left; 20px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#888); width: 400px; height: 400px;" >
  <iframe src="IFrame.html" style="width: 400px; height: 400px;" frameborder="0" />
</div>
</center>
</body>
</html>


IFrame.html

<html>
<head>
<title>Inner Frame</title>
</head>
<body style="background-color: blue;">
Text within the iframe

<div style="position: absolute; left: 0px; top: 0px; width:400px; height: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); background-color: black;">
  This is an overlay within the iframe.
</div>
</div>
</body>
</html>


All pretty straightforward so far right?

Wrong.

Here's two images of the what the above produces. One is produced by IE8 and the other, IE9.

Internet Explorer 8 Internet Explorer 9

See the problem? The entire content of the iframe has become transparent. That's not what we wanted at all! IE9 on the other hand, renders it correctly.

The solution? Remove the DropShadow on the div. Ok, so it doesn't look as good but at least it gives a consistent look across IE browsers. You can always reproduce the box shadow effect using a different method, perhaps a second div that has a grey scaled colour, placed underneath the div containing the iframe but with a bit of an offset, I'd imagine that'd have the same effect although I haven't actually tried it.

Oh the joys of old versions of Internet Explorer.