IE Gradient Bug with PNG-24

I try to make sure to do my due diligence by checking my sites in the 3 major browsers. And usually, much to my chagrin, I also end up thoroughly testing in IE6, although I’m not willing to make them pixel perfect unless I’m being paid very well to do so. So, I was extremely surprised when I client got ahold of me about a display bug in a now live site. Ok, so you have to believe me, I really did check in IE7. On multiple computers. I don’t know why the client’s installation was special, but sometimes that’s just how things go.

The problem

Demo of problem

This isn’t the actual client site, but you get the idea.

The solid-color slightly-transparent drop-down menu backgrounds were showing up as 80% alpha gray to completely transparent gradients, thus rendering most of the navigation illegible.

Code Foundations

These were pretty run-of-the-mill drop-down menus comprising

  • semantic, nested uls, with
  • CSS-styling, including hover states (where available), topped with
  • jQuery/Superfish enhancement,

although I was trying some CSS3 with the styling.

The CSS wasn’t anything for beginners although it’s nothing crazy. To start with, my backgrounds were transparent by way of RGBa background-colors for browsers that support it. Then it downgraded to a opaque grey for older versions of modern browsers/non-IE browsers. And then, in the IE-only style-sheets I swapped in a 1×1px PNG-24 w/ alpha transparency (which was being fixed by DD_belatedPNG in IE6).

Ok, no problem so far. When I tested in IE6/7 my background image swapped itself in and repeated and everything looked fab.

Except for on the client’s computer.

The Cause

After much Googling that turned up very little, I found some promising complaints about pngs going wonky in IE if they’re stretched. Then I was super confused. You can’t stretch a background image with CSS. But to keep it simple: for some reason, the JavaScript was hijacking my background-repeat and instead was scaling (stretching) the png, under certain circumstances. And voilà! seemingly-unexplained, phantom, uncoded gradients.

The Solution

Make the PNG 2×2px or 800×1px or … well, you get the idea. IE doesn’t always play nice with 1×1px PNG files with alpha transparency. Who knows why, it just doesn’t. But it’s an easy fix. Unless you want to complain about file size. But then you better go off and make me a gorgeous background sprite so you’re not killing your visitors with a bazillion extra HTTP requests if you know what’s good for you.

Closing Arguments

In short: if the background image is getting stretched, just change from 1×1px to something larger.

Also, please don’t murder the teacher, advanced kids. I realize that my implementation also had some kinks that should be ironed out, but this post is just about those damn PNGs.

This entry was posted in Front-end Dev and tagged , , . Bookmark the permalink.
Like what you read? Share:
or Subscribe:

Similar Posts

24 Responses to IE Gradient Bug with PNG-24

Subscribe to this post’s comments

  1. Rick Hopkins

    6 Oct 2009 9:26 pm

    Thanks for this…. I was searching all over trying to find a solution to this absolutely absurd problem. IE sucks.

  2. Matt White

    6 Oct 2009 9:26 pm

    Fantastic! Thanks for posting this… We couldn't duplicate on our end, but the client was having the issue. Changing to 2×2 fixed the issue. Thanks again!

  3. David Morin

    27 Oct 2009 9:27 pm

    Thank you!

  4. Scott B

    29 Oct 2009 9:27 pm

    Thank you SO much! I was having a heck of a time even determining where to start troubleshooting this issue as I, like you, couldn't reproduce it and there didn't seem to be any easily identifiable correlation on machines it manifested on. Were you using custom JS for that menu or some "boxed" solution/framework (e.g., jQuery)?

    • rae

      30 Oct 2009 9:28 pm

      @Scott and anyone who is wondering: This was appearing when I was using jQuery + the Simplefish plugin. My best guess for the cause is something in the Simplefish code but once I realized how to fix it, I didn't spend much time figuring out the cause.

  5. AdamBig.gs

    2 Nov 2009 9:30 pm

    THANK YOU!! I had been getting random reports of this on a site I built but could never reproduce it on my machine to fix it. You're a life saver.

    And IE reminds us CSS ninjas one more time how formidable an enemy it still is :(

  6. John Bubriski

    17 Dec 2009 9:31 pm

    You da man.

  7. ScottRN

    17 Dec 2009 9:31 pm

    I have the same issue! Ugg! You are right that there is little on this on the internet. Unfortunately, my images are already large. Currently my images were coded like: < td>< img src="/images/banner/b.png" width="100%" height="127" align="top" />< /td> where images a,c,e were defined widths, and b,d were stretchable images. But it would do the fade effect in IE7 on some peoples machines. I've had IE7 for awhile, but only this week did it start. I can't think of anything that has changed. My fix for these images was to replace the above with: < td style="background-image:url(/images/banner/b.png);background-repeat:repeat-x;height=127px;">< /td> and I was back in business.

  8. Ciaran Park

    7 Jan 2010 9:32 pm

    Kudos Rae!, took me forever trying to figure out this bug, had it twice through a build, in the first instance I found it to be a script I wrote creating a fancybox type fade. Re-wrote the script and fixed it, only for jquery tooltips to create it again. Thanks for a wicked simple fix.

  9. Esteban C.

    1 Apr 2010 9:32 pm

    Thanks!

    I had a 1px PNG with transparency as the background, but the 2×2 pixel approach didn't work.

    How ever, the approach pointed by ScottRN did work, thank you very much!

    The background: url(img) repeat 0 0; was changed by:

    background-color: transparent;
    background-image: url(img);
    background-repeat: repeat;
    etc….

  10. Gordon G

    9 Jul 2010 9:33 pm

    Thanks for the info. I'm very glad I could find something regarding this bug.

    IE7 is the culprit in my case as well (at least it's provided the only instance of this bug so far). My page isn't running any Javascript framework, though, and I don't see any JS that would be handling any of my images (which, yes, I understand that doesn't mean much).

    I do know I checked a PC in the room next to the one experiencing the issue, and although both are running the same version of IE7, the other one doesn't have the issue.

    I'll post again if I can figure anything else out… otherwise I'll just try resizing.

  11. James

    4 Oct 2010 5:44 pm

    Perfect. This was driving me crazy. thanks

  12. Bob

    5 Dec 2010 2:03 am

    OMG! 4 days of madness and now it’s solved. I knew it was related to PNG background images but NEVER thought it was the dimensions of the PNG. Stupid menu that I bought for $50 used 1×1 pixels for fill and IE8 started coughing up a lung. Thank you for documenting this bug!!!

  13. Gary

    24 Jan 2011 7:30 am

    You’ve just saved me a good few hours of trying to find obscure information about why IE7 and IE8 were creating gradients from alpha-transparent background images, once I’d interacted with the page via JavaScript (jQuery). Mine were 1×1, and switching them to 2×2 fixed the problem immediately.

    Thank you!

  14. Gijs

    31 Jan 2011 5:51 am

    thanks! you saved my day

  15. Visual C# Kicks

    21 Jul 2011 11:04 am

    You sir deserve a medal of some sort. One ridiculous IE quirk down, one million more to go.

  16. Foxe

    12 Sep 2011 11:24 pm

    Wow. Just Wow. Whilst my brain wonders how slash why you came to this solution, I’m not going to question it. Bloody brilliant.

  17. Jon

    23 Oct 2011 9:35 am

    Thanks so much !
    I had the bug on IE 7 & 8, and it worked by replacing my 1×1 pixel by a 2×2 pixel !

  18. Emily H

    30 Nov 2011 8:11 am

    Thanks Rachael for figuring this one out and taking the time to document the solution. Ditto Visual C# Kick’s comment, excluding the “sir” ;)

    We found it was happening only on IE8 and it seemed to be occuring intermittently. My other thought was that the something recurring was going on to make the transparency fade out like that. But we changed our 1 pixel png for a 2 pixel one and that fixed it.

  19. Adam

    31 Jan 2012 3:10 pm

    Thanks so much for this. I couldn’t find the answer to this anywhere!

  20. Dirk-Jan

    14 Feb 2012 8:57 am

    Was kinda surprised when I saw the gradient bug in my site. Never really seen it before and who might have known it was such a weird bug. First I thought it was a script or something cause at first it loads good for a split second then it switches to a gradient…

    Thanks for the awesome tip! saved my day!

  21. Sam Jarvis

    12 Mar 2012 8:24 am

    Thanks! I love simple fixes like this :)

  22. William Li

    10 May 2012 6:57 am

    my mind is blown! Thank you for this fix – had been living with this for two years but gladly stumbled on this fix.

  23. jena

    5 Dec 2012 12:18 pm

    this was exactly my problem, I will try the solution and thanks beforehand.