Binary Lion Studios

I code for fun and for food.

dd_belatedpng pages blank in iframe

Ran into an issue today when testing a Facebook application in IE6. The page is a canvas page that is rendered in an iFrame. It uses the excellent HTML5 Boilerplate and thus, the dd_belatedpng library to provide transparent PNG support in IE6. I found that whenever the CSS selector passed to fix() matched more than a single element, the entire page would become blank.

I found a workaround on an Adobe thread. Apparently dd_belatedpng sets the position to relative on the HTML tag. This is what was causing the issues. The workaround is to (ugg) modify the dd_belatedpng source and add the following conditional (on line 138 of the non-minified 0.0.8a release):

1
2
3
if (el.nodeName != 'HTML') {
    el.style.position = 'relative';
}

That ensures the HTML tag doesn’t get its position set to relative. It’s a hack, but so is IE6, so I’ll still sleep at night.