PDA

View Full Version : PNG transparenc error occured on ie8 when combining with animate() jquery



smansakra
05-29-2010, 12:14 PM
as the title said my png transparent image become black colored image in ie8 when animate it with jquery animate() function. can somebody help me? :confused:

please see this video: http://www.youtube.com/watch?v=2iQ-ci-xVqk

"NOTE: i'm sorry with the quality of my video, i don't know why, i have uploaded high quality video but on youtube my video become low quality"

azoomer
05-29-2010, 01:32 PM
Hi i have experienced a similar problem before. Adding a link to jquery.pngFix.js
helped me. I am attaching the file. Just link to it in the header as you do with jquery and see if it helps

Edit: Ok don't try this. I guess it will not work.

jscheuer1
05-29-2010, 01:34 PM
I'm not sure if there is really good a solution for this, because of the fact that, in order to get the effect you are after, you really have to fade the alpha channel image. If there were a way to avoid that, like in a fading slide show placing the alpha channel image around the fading content it can work.

The fade filter in IE (all versions that support it - 5.5+) is known as:

progid:DXImageTransform.Microsoft.Alpha

often abbreviated as just 'alpha'.

Unlike the opacity style property of virtually all other browsers that do fading, it affects the alpha channel of the item, in this case the image. If you were to open up the image in a good image editing program and view the mask, it's probably black. That's what you are seeing, the mask. If you could change the color of the mask, it might improve things, but you would still see the color of the mask.

Another thing you could do is use single channel transparency as is used when you save your image as a .gif or as .png with 256 colors or less. But then you wouldn't have the smooth edges.

Another solution would be to somehow get the mask outside of the element(s) that get faded (like I mentioned for a fading slide show). This can often be done via positioning. Like you make up an image or several images which have only the mask on it, place it behind the content, or in the case of several images, arrange them around the content. Remove the mask from the content, have its background or whatever just be an image with no mask so that it is smaller than the mask which will then show around it. But now the mask won't fade, but it can disappear (display none) before, during or after the content fades.

jscheuer1
05-29-2010, 01:39 PM
Hi i have experienced a similar problem before. Adding a link to jquery.pngFix.js
helped me. I am attaching the file. Just link to it in the header as you do with jquery and see if it helps

Worthless for IE 8. That just fixes static .png support in IE 5.5 and 6, which lack native support for alpha channel .png images.

smansakra
05-30-2010, 02:30 PM
I'm not sure if there is really good a solution for this, because of the fact that, in order to get the effect you are after, you really have to fade the alpha channel image. If there were a way to avoid that, like in a fading slide show placing the alpha channel image around the fading content it can work.

The fade filter in IE (all versions that support it - 5.5+) is known as:

progid:DXImageTransform.Microsoft.Alpha

often abbreviated as just 'alpha'.

Unlike the opacity style property of virtually all other browsers that do fading, it affects the alpha channel of the item, in this case the image. If you were to open up the image in a good image editing program and view the mask, it's probably black. That's what you are seeing, the mask. If you could change the color of the mask, it might improve things, but you would still see the color of the mask.

Another thing you could do is use single channel transparency as is used when you save your image as a .gif or as .png with 256 colors or less. But then you wouldn't have the smooth edges.

Another solution would be to somehow get the mask outside of the element(s) that get faded (like I mentioned for a fading slide show). This can often be done via positioning. Like you make up an image or several images which have only the mask on it, place it behind the content, or in the case of several images, arrange them around the content. Remove the mask from the content, have its background or whatever just be an image with no mask so that it is smaller than the mask which will then show around it. But now the mask won't fade, but it can disappear (display none) before, during or after the content fades.

:confused::confused:
thanks for reply i'm thingking hard to read what you have just wrote. i repeat and repeat again. hum, let's me think....:confused: