Disappearing Page Elements and DXImageTransform

Mike BerrymanI was building a pseudo-report for a client using javascript to dynamically construct the report right on the page when I ran into a perplexing little bug.  What I was essentially doing was creating a timeline using a div with a short height and a wide width, then using absolute positioning to place some child elements of the div (images of an arrow) outside of the div at key points along the “timeline”.  All through my development, this worked absolutely fine, until I was nearing completion.  I launched the report to the client site and brought it up for testing, and all the child elements of the timeline div had disappeared!

I knew from analyzing the DOM that they were there, and could even see that they were positioned correctly on the page, but they seemed to be invisible.  There was no random display: none; css property, nor anything else of the ilk – the elements were just plain not showing up on the page.  I was quickly able to diagnose that this happened when the page was in IE7 document mode, but that did little to help in trying to track down the problem (google-fu had let me down!).

After some playing around with the styling, I came to the conclusion that the problem had something to do with the fact that child elements were positioned outside of their parent element.  I stumbled upon this by using the F12 developer tools in IE to reposition my child elements so they overlapped the timeline div, but the peculiar part was that I could only see the parts of the child elements that overlapped the timeline.  Anything that overflowed beyond the bounds of the timeline div were once again rendered invisible.

After much hair pulling trying to figure this out, I decided to create a simple, stripped-down version of my page in straight HTML.  I created my timeline div, put some child elements inside it and positioned them outside their parent, then rendered the page in IE7.  Imagine how baffled I was to see it work just fine!  Not knowing what else to do, I started building my page up little by little to match the final version of my problem page, when eventually I stumbled upon the problem: DXImageTransform.

DXImageTransform is an ActiveX-leveraging style that you can use to apply a myriad of nifty effects to elements on your webpage.  Being that I didn’t want my report to look like a cruddy flat, angle-cornered single-colors web page and more like a nice-to-view report, I had opted to use DXImageTransforms in my final report renderings.  Specifically, in the case of my timeline div, I was using the Gradient transform to get a nice faded background color, as so:

Gradient {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#00ffff',

It turns out, in IE7, elements outside of a div with Gradient are just not rendered as soon as the transform is applied (in addition to many other transforms – I tried Blur, DropShadow, Shadow, MotionBlur, Fade and Wave.  Alpha was the only one I tried that didn’t have this effect).  So what to do about it, then?  It’s actually a pretty simple thing to fix using a small snippet of javascript:

if (!document.documentMode || document.documentMode == 7) {
  document.getElementById('div1').style.filter = "";

This will analyze the documentMode property of the document (which doesn’t exist in IE versions prior to 8) to see if the doc mode of the page is 7.  If so, it will remove the filter style from the targeted div.  Cross-browser designers would probably also use some user agent analyzation – the documentMode property probably doesn’t exist outside of IE.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s