Question

When IE renders a filter: alpha(opacity=..) whether it’s on an image or text. It looks bad.
Is there a way to make IE render normal-browser-like smooth opacity?

If no, how can I easily after a fadeIn (opacity x->1) javascript animation re-render the elements so it doesn’t look bad anymore..?

Answer 1

Applying a background colour or an opaque background image to the element should fix this problem. This is due to the way filters work, they’re ActiveX components and they’re old so they have certain limitations when working with partial transparency.

You can also disable the filter when the animation has completed, using something like:

myElement.filters[0].enabled = false;

A lot of animation libraries use this technique to enable the filter only during the fading so the user will not notice the ugly aliasing as much.

There’s another fix (best viewed in IE to understand the point of the post), although it’s more of a hack and it’s not a good solution in all cases, particularly where you need to alter the size of the image.