Results 1 to 5 of 5

Thread: PNG transparenc error occured on ie8 when combining with animate() jquery

  1. #1
    Join Date
    Aug 2008
    Location
    karanganyar, solo, indonesia
    Posts
    161
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question PNG transparenc error occured on ie8 when combining with animate() jquery

    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?

    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"
    ///////////////////////////////////////////////////
    ///// http://www.mediatutorial.web.id
    ///////////////////////////////////////////////////

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default jquery.pngFix.js

    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.
    Last edited by azoomer; 05-29-2010 at 02:07 PM.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by azoomer View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2008
    Location
    karanganyar, solo, indonesia
    Posts
    161
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question hum

    Quote Originally Posted by jscheuer1 View Post
    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:

    progidXImageTransform.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.

    thanks for reply i'm thingking hard to read what you have just wrote. i repeat and repeat again. hum, let's me think....
    ///////////////////////////////////////////////////
    ///// http://www.mediatutorial.web.id
    ///////////////////////////////////////////////////

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •