IE Gradient Bug with PNG-24

The Web is ever changing, and this article is relatively ancient having been published 13 years ago. It is likely out of date or even blatantly incorrect in relation to modern better practices, so proceed at your own risk.

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.

23 thoughts on “IE Gradient Bug with PNG-24”

  1. 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!

  2. 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)?

    1. @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.

  3. 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 :(

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

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

  6. 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;

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

  8. 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!!!

  9. 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!

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

  11. 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 !

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

  13. 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!

Comments are closed.