| projects | articles | photos | about

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 != '') {
  window.status = 'Done';

window.onload = RefreshThumbnails;

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.

Comments are closed.