Internet Explorer Filter Quirks
My online photo galleries show thumbnails of the photographs for every folder. Sometimes after reloading a gallery page some of the off-screen thumbnails weren’t rendered – only a gray rectangle appeared instead of the image. Hovering over the thumbnail revealed the correct image.
The thumbnails have a filter:progid:DXImageTransform.Microsoft.Shadow(...) CSS style applied to them which means that they have a nice shadow. Removing this style solved the problem, but obviously the gallery looked less nice.
Pim Rijpsma explained to me that the problem is caused by a buggy DirectX implementation – Internet Explorer uses DirectX to apply the effect and for off-screen images the image sometimes “gets stuck” in some internal buffer. Hovering over the image creates another request and the image is finally shown.
Obviously, I have no control over people’s DirectX version. Hovering over the problematic images makes things right, so why not simulate this hovering over all the thumbnails after the page loads? I ended up using the following code:
<!--[if gte IE 5.5]>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function RefreshThumbnails() {
var aReturn=document.body.getElementsByTagName("A");
for(i = 0; i < aReturn.length; i++) {
if (aReturn[i].currentStyle.filter != '') {
aReturn[i].setActive();
}
}
window.status = 'Done';
}
window.onload = RefreshThumbnails;
</SCRIPT>
<![endif]-->
Basically, the code checks if the browser is IE5.5 or newer. If so –
go over all the Anchors which have filters and activate them (which is apparently similar to hovering).
The code is executed on page load. It solves the problem quite nicely.
