Looking for workaround for IE8 opacity bug

Question

One of my css styles has a black background color and a filter with an opacity. This is supposed to be translucent and almost always is.

There is one exception to this.

IE8 doesn't play nice with a lot of Microsoft's other products, and update panels in .NET seem to be one of them. If I have an updatepanel that sends a javascript alert on callback, IE8 won't bother rendering the filter of the style. The screen will just be black until the user moves the alert box or clicks O.K.

I tried to force a redraw by changing dom elements and all that, and it seems that IE8 is just lazy and doesn't care about the filter when the alert box is up.

I need to maintain the opacity without using a filter or opacity tag, as these don't render in the correct order with update panels and alert boxes in IE8.

Is there a viable alternative?

Answer 1

One alternative is to have a semi-transparent PNG and set it as the background. This removes the need to set a transparent filter on the element as the transparency of the PNG is applied. This works in IE8, Firefox, Safari and Chrome (but probably not in older versions of IE).