pitfalls animation png in IE

All of us here present love IE6 passionately, a little less fervently - IE7 and sincerely believe (though not all and not always admit it) in IE8. Here they wrote about many ways to deal with the feature of the sixth edition of the small-size browser not to understand the png format. But all these discussions concerned just downloading png-pictures. And a much more interesting (and more difficult) task appeared before me - the animation of these pictures. And everything would be fine if you needed an animation in which you only need to change the position and size of the pictures. I needed to make an animation in which their transparency would smoothly change. It was then that new tricks appeared.

AlphaImageLoader

If you know what AlphaImageLoader is and how png.htc is structured, then you can skip to the next section. Well, for those who are not in the know, I will try to briefly explain the mechanism of png.fix.

In their browsers, MS, like other developers, likes to embed some special features. One of these features (since version 4.0) is filters for creating “multimedia-style visual effects” (details in MSDN ). Starting with version 5.5, IE has an AlpahaImageLoader filter (details in MSDN ), with which you can display a picture, including png with transparencies, between the background and the content of the object. Using this filter with JS, you can automate the png boot process in IE 5.5 and 6.0. The most common way is:
')
function PngForIe(elem)
{
elem.style.filter = "progid:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + elem.src + ');"
elem.src=blank; // blank 1x1.
}

What does this feature do? First, it places the correctly loaded (with the help of the AlphaImageLoader) png'shuku between the background and the incorrectly loaded (the one that we fix). And then it replaces the wrong picture with an absolutely transparent one. And we see exactly what we wanted to see - a normal png'shka:

In order for the image size to change as required by the styles, you need to add the sizingMethod = 'scale' parameter to the AlphaImageLoader .

Now we can not be afraid of png'shek and even boldly animate them by changing the position and size (though, if they change, you will have to start the fix again). But what happens if we want to change the transparency of this picture? After all, transparency in IE (5.5 - 7.0) is also set through filters.

Filters and unrealized hopes

We turn to the most interesting.
We are trying to add an alpha filter to the corrected image, counting on the fact that the transparency factors of the image and transparency multiply and ... we get not at all what we expected! There are several jambs at once, depending on what we are trying to do with the picture:

What do we see?
The first image ( alpha (opacity = '100') ) became opaque wherever the opacity was greater than 0.
At first glance, the second alpha (opacity = '70 ') is almost the same as the original, but if you look closely, you can see that the smoothed edges are gone and there are exactly two colors left. In fact, opacity is 70% (opacity is precisely the coefficient of opacity: 0% is transparent, 100% is opacity) coincides with this characteristic of most of the original image.
Thus, if the image is displayed in its original size, then those pixels that were absolutely transparent remain the same, and the rest of the transparency becomes equal to the value of the opacity parameter of the alpha filter (in percent). So all the advantages of png over gif are lost.
But what happens in the third picture discourages the use of png completely. When you try to simultaneously resize the image and change its transparency, what was absolutely transparent suddenly turns black!

It is worth noting that the shoals appeared in IE7, which initially is quite friendly to png. Moreover, there is another glitch, which I wrote about in l2k comments:
If you use an alpha filter on the text (which is the default in IE7) with anti-aliasing (antialiasing), then you get the same jambs as in the example “Filters and unjustified hopes”. That is, instead of a beautiful transparent font - we get a bold, stepped font without antialiasing.

Who is to blame and what to do

If there is a problem, then you need to somehow deal with it. Since I needed to make an animation of just 5 slides, the first thought that came to mind was to honestly make 5 pictures with different transparency and load them simply with AlphaImageLoader. But the substitution of pictures means that the pictures used in the animation must be uploaded in advance. In principle, there is nothing difficult in this, but I decided that it was worth thinking further.
The next option was to score on png and use gif. In this case, the roundness will be lost, but nothing particularly terrible will happen. But we are not looking for easy ways!

And then this thought came to my mind. We do not know how to multiply or divide transparency, but then we can add it! So you can make one picture five times more transparent than the original one and place 5 of its copies on top of each other, and during animation just make it display: none in turn.

Here you can see - what came of it, as well as see where the screenshots came from (see via IE or see nothing).

PS Looked at how IE8 reacts to all this. I didn’t find any jambs with filters, but he doesn’t understand style = "opacity: 0.7"