Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

IE & PNG problem (jQuery)

Discussion in 'Website Design Forum:' started by notaFISH, Dec 8, 2010.

  1. notaFISH

    notaFISH Junior Member

    I just finished my first website. Everything seems to be working fine except for IE.
    I used jQuery for animation using png images. The problem is that I see black outlines around my png images.

    www.notafish.me

    I tried some solutions I found on the web but none of them really worked.
    Please let me know if you know the solution.

    Thanks in advance.
     
  2. Harry

    Harry Senior Member

    I have no idea what might be causing it, but your site looks awesome!

    Perhaps use some CSS3 instead of jQuery, if jQuery is the problem?
     
  3. Sunburn

    Sunburn Active Member

    Hey notaFish,

    I have come across myself, I suspect its a bug in the rendering engine of IE for handling animated opacity on alpha-transparent pngs

    In my non expert kinda way of trying to explain it :)

    Your using alpha transparent pngs which work fine in modern browsers and also lower versions of IE with various png fixes. however! from my experience ie cant handle changes to the opacity of the alpha value of image during transitions. thus why your getting the black outlines.
    to highlight it, looking at your page in IE your main png areas are alpha transparent images and I picks up the opacity correctly from the image file on load, as the opacity value of the alpha png is animated IE looses the default alpha level in the image, and tries to handle it based on absolute values. hence the solid black lines.

    To the best of my knowledge there is no real fix for this, the only solution I managed to find that worked better, if my memory serves me well was to use png8, and specifying the matte as the background colour, although I dont think this is going to be a solution for you due to the patterned bg.

    here is the original post....
    http://www.designforums.co.uk/web-coding-development/5490-png-problem.html

    The final solution I developed for the above problem was to serve flash for IE only browsers.
    used here Web Development | Mobile Applications | SEO | Web Ecommerce - Ventutec in the main animation on the homepage.
    FF, SAF etc use JS, IE uses flash.

    An alternative solution is you don't animate the opacity values of your alpha transparent png in IE.

    Ps. Other larger devs are having this problem too.
    view in ie and hover over the download button/icon/link
    http://www.panic.com/coda/



    Hope this helps.
     
  4. notaFISH

    notaFISH Junior Member

    No solution... grrrrrr.
    Hey thank you guys for all your kind and helpful comments. I just hope somebody bomb the IE building. j/k
    Well I guess I'm just gonna wait untill IE ppl fix the problem or use no animation on IE as Sunburn suggested.
    Thank you all.
     
  5. glenwheeler

    glenwheeler Senior Member

    Hey notafish,

    Sunburn helped me on this one a while back and yes it was found to be a bug. I used his method and it was the best solution, client was happy with the outcome.
     
  6. Harry

    Harry Senior Member

    Use CSS3 to animate it in supporting browsers!
     
  7. Harry

    Harry Senior Member

    Here we go:

    Not a fish

    Look at that in Firefox and Chrome.

    Two things you will need to do:

    1) Create a sprite of the off and on states of the images, off on top, on on the bottom without text on.
    2) Replace lines 88,89,90 with simply #items li:hover{ background-position:bottom left; } (might need more jiggery pokery after that).
     

Share This Page