IE6 PNG Fixes – SuperSleight & Unit PNG Fix

Aug
9

18 Comments - LEAVE A COMMENT

A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files – so if you prefer to use the mini version of SuperSleight it would just be 2k.

Both are called the same way in the <header> of the document – a conditional focusing on IE6 and below.

Unit Interactive lists the benefits of it’s script as:

  • Very compact javascript: Under 1kb!
  • Fixes some interactivity problems caused by IE’s filter attribute.
  • Works on img objects and background-image attributes.
  • Runs automatically. You don’t have to define classes or call functions.
  • Allows for auto width and auto height elements.
  • Super simple to deploy.

24 ways introduced SuperSleight as having the following qualities:

  • Works with both inline and background images, replacing the need for both sleight and bgsleight
  • Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
  • Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
  • Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
  • Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

After creating a few png transparent images and testing both methods here are my pros and cons of each:

SuperSleight
PROS:

  • No need to edit .js files with image link when both are placed in the same directory (ie: root).
  • Plug and play – just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.

CONS:

  • Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
  • Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
  • Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.

Unit PNG Fix
PROS:

  • Smaller size. But only by 1k.
  • No popup warning that their is active content.
  • Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.

CONS:

  • Comes with the path to the clear.gif image linked in the /images folder.

So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6’s until there is virtually no one using IE6.

Jump to Comments

18 Responses to IE6 PNG Fixes – SuperSleight & Unit PNG Fix

  1. […] CSSGirl wird ein neuer PNG Fix vorgestellt, ich werd ihn nicht gleich ausprobieren aber er scheint wohl […]

  2. Rob says:

    Thanks for this. I’ve been using the PNGfix CSS method but it doesn’t support transparent backgrounds.

    I’m going to give this method a try with some of my more graphic heavy designs.

    Thanks

  3. Lindsey says:

    Yes, I haven’t fully tested Unit PNG fix yet, but just from the sample tests I did it looks to be a sure winner.

    I have used SuperSleight intensively and can attest for it’s awesomeness though. Used it on some really heavy, really crazy templates that basically were all transparent PNGs.

  4. etomyam says:

    I’ve tried unitpng but somehow it create mess with my theme compared with old supersleight, still configuring it

  5. Lindsey says:

    Really? That’s a shame! I actually just started using UnitPNG officially for the new design of this site because Supersleight made one of my gif images disapear for no reason, while it was completely uneffected with Unit.

    Good luck!

  6. Nathaniel says:

    I see tons of solutions for pre-IE7 png problems, but IE7 has its own problem with the format that is driving me nuts right now.

    Basically, I’ve been playing with layering background images in tables and it works great. I have an image in the cell on top of an image in the table and both of those sit on and image in the div. The problem is, when I go to another page, all the pngs flash.

    I’m not sure if IE7 is just refusing to cache those images or what, but Firefox doesn’t have this problem at all. Would UnitPNG fix this as well? Here’s the site I’m working on at the moment…

    http://64.79.215.238/~briar/index.html

  7. Lindsey says:

    I’m not entirely sure – but I don’t quite think it’s a PNG problem there. I think it may have to do with the size of the images and them not being cached so they have to reload each time. I think you may have the same problem no matter what type of images you use.

    Have you tried to combine your images into one sprite and than working from that?

    Other than that, if it is a problem with the PNG images (although I’ve never encountered one yet) I’d suggest giving UnitPNG a whirl.

    I have definitely chosen it as my preferred PNG method – it’s quite good!

  8. Nathaniel says:

    The reason I thought it might be a png problem is that the jpg images (the menu pic/buttons) don’t flash, just the background elements like the vines, the header background and the footer. Also, with the exception of the vines, no image is larger than 7k. And FF has no problem with them (although it has its own little visual bugs to deal with).

    I could combine the images, but then I just have one huge png instead of a bunch of little ones (it’s important for the pinstripes to show up under the vines, which look terrible in anything but png format and are the basis of the whole visual experiment I’m playing with right now).

    The vines are the largest part of the imagery, with the biggest set coming in at 107k. But, the whole point of my layering experiment was to allow the other, more important parts of the site (the main body including he header, content and footer) to load quickly, without having to wait for the alpha intensive vines to pop up. I’ll give UnitPNG a whirl, though. Thanks…

  9. Dave Bui says:

    I used SuperSleight for one of my website and its problem appears to be exactly like you said. Unit PNG Fix would be another option for me now. Thanks!

    Dave

  10. Chad says:

    With Unit PNG, I can get the PNG fix to work for stand alone .png images (in an tag), but I can’t get the transparency to work for background images. Very frustrating.

  11. Wassim says:

    Thanks for this useful post. I would strongly suggest that people stop using IE6 anyway!
    In fact, IE6 causes alot of troubles for web designers (including me) when they want to come up with a great interactive and creative website… I personally think that IE6 is causing the web designers to stick where they are just for the sake that it is a Microsoft Product!

    STOP USING IE6!!

  12. Nick says:

    I am having problems getting this to work on images that are inside a or which initially had their “display” style set to “none”.

    When I show the /, there is just blank space where the PNG should be.

    I had this same issue with Supersleight, but at least with supersleight I was able to issue a supersleight.run(); command after I showed the /.

    Any ideas how to fix this problem with Unit PNG Fix?

  13. Don says:

    For some reason, putting a script tag into a conditional comment wasn’t working out for me, so I just added browser detection (for < ie7) around the UnitPNG code – works great, no errors in FF or IE.

    var clear=”images/clear.gif” //path to clear.gif
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if ((browser==”Microsoft Internet Explorer”) && (version0){var el=els[i];var es=el.style;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+el.src+”‘,sizingMethod=’crop’)”;el.src=clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(ip)){var path=elb.split(‘”‘);var rep=(el.currentStyle.backgroundRepeat==’no-repeat’)?’crop’:’scale’;es.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+path[1]+”‘,sizingMethod='”+rep+”‘)”;es.height=el.clientHeight+’px’;es.backgroundImage=’none’;var elkids=el.getElementsByTagName(‘*’);if (elkids){var j=elkids.length;if(el.currentStyle.position!=”absolute”)es.position=’static’;while (j– >0)if(!elkids[j].style.position)elkids[j].style.position=”relative”;}}}}}
    window.attachEvent(‘onload’,pngfix);
    }
    else
    {
    }

  14. Don says:

    BTW, comment system worked the code over a bit:

    (version0) should be (version < 7)

  15. Michael Torfs says:

    I was reading with great interest as I have a frustrating problem with Supersleight. When I use atransparant PNG containing (containing multiple images: CSS sprite) as a background, the transparancy fix works, but the background position is always reset to top left or 0 0.
    UnitPNGfix does not solve that for me.
    Anybody an idea how to solve this background position?
    SuperSleight talks about positioning, it resets it to relative, I must say my knowledge is to limited to understand what is going on.

  16. ErisDS says:

    Hi, this is a great article thanks.
    I’m about to go try unit as I’m finding supersleight messes with text anti-aliasing and is very slow to load.

    Really like your blog design, but noticed that like many blogs you don’t include the year on your articles – can be confusing!

    Thanks again,

    Eris

  17. sasa says:

    Unitpngfix has some odd behaviour in my projects so I have abandoned this stuff in favor of supersleight.

    Unitpngfix sometimes tends to hide even jpegs and completely disables some jquery plugins. If you use jquery avoid unitpngfix.

  18. James Brown says:

    I am having the same problem as Michael Torfs, my background position is being reset to 0 0. Otherwise everything else works.

Leave a Reply

Your email address will not be published. Required fields are marked *