DD_belatedPNG 0.0.7a available (DD_roundies 0.0.2a “almost there”)

January 1, 2009

A host of performance improvements and glitch repairs.

http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a

Advertisements

56 Responses to “DD_belatedPNG 0.0.7a available (DD_roundies 0.0.2a “almost there”)”

  1. Matt Says:

    A really good start. Better features would be:

    a) Using a name filter to not transform ALL PNGs, but only ones with a special pattern. (Like Dean Edwards’ IE7 script.)

    b) Auto-loading the script with an onDOMLoad function. (Allowing people to just drop the script reference in with a conditional comment and letting it go to town.)

  2. Sai-Kit Hui Says:

    Thank you for this wonderful script. I did notice that it is not working on tags.

    I already have enough trouble styling . Hopefully it is an easily fixable problem.

  3. sharkbait Says:

    wow, you got the scrollbar-issue solved with the new script…but somehow it looks like the PNGs don’t get cached, so every time the page refreshes, the background disappears for a second. i’ve read in your changelog “images get cached correctly — most of the time” what does this issue depend on? cheers & thanks a lot, j

  4. Dimitri Says:

    DD_belatedPNG.fix(‘img[src=”*.png”]’) crashes IE6 🙂

  5. dillerdesign Says:

    Dimitri, you can’t use CSS selectors that IE6 doesn’t understand. Attribute selectors aren’t understood in IE6, not even a little bit.

    Also, 0.0.7a handles this for you, just say fix(‘img’);

    Read the changelog, fourth bullet point:
    http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a

  6. Jason Says:

    I seem to be getting an error on firebug:
    styleSheet is undefined (Line 45) on 0.7a

  7. dillerdesign Says:

    Jason, your second comment hasn’t shown up in public view yet, probably a cache thing…

    …anyway, I probably should be doing some error catching in case people make the same fairly innocent mistake you initially made.

    I like your site, btw. Usually I hate intro/splash pages, but yours made me chuckle =)


  8. Great job man!
    Changed the history of webdesign.
    Thank you very much!

  9. Geoff Kaile Says:

    Works wonderfully for me in IE7, but having some issues in IE6 with rounded corners on elements, any ideas?
    Great work, keep it up!
    Geoff

  10. carloslnx Says:

    Hi Dillerdesign!

    I have the following code:

    Item1
    Item1
    Item1

    css

    #container{
    background:url(imagem.png);
    }

    #container ul li{
    background:url(imagem.gif);

    }

    Using your fix the background of the list does not appear!

    Is it a bug?

  11. Matt Montag Says:

    Thanks for the script – worked like a charm!

  12. Seth Says:

    When using the png fix on an image that’s inside a div with a overflow:auto, the image moves as you scroll down.

  13. Seth Says:

    Yes, and my fault for not clarifying this bug only happens in ie6.

    http://sethmscott2.dreamhosters.com/Untitled.html

  14. dillerdesign Says:

    Seth, I haven’t figured out how to fix every layout/positioning bug in IE6, so there are still some you have to fix yourself =)

    That scrollable element in your example, it has an ID of ‘statusUpdates’ – try giving it relative positioning. Your problem will self-resolve after that.

    #statusUpdates {position:relative;}

  15. Sai-Kit Hui Says:

    Let me try again, I was trying to say that it is not working on hr tags. Just letting you know.

  16. ljpw Says:

    got an error when using this with the jquery dialog..

  17. Roi Says:

    First of all, thanks for your great job.

    I have a desing involving the use of sprites of icons. Normally I use the pixel gif trick as the src of an image, and then change the background using a PNG sprite.

    But DD_belated, doesn’t work with the tag img. Of course, I can use divs to place the icons, but I prefer to use img tag, as it complains the web semantic standars.

  18. Emil Says:

    Hey, great work! Any plans to support alpha png for input type image?

  19. Mike B Says:

    Hi, thanks for the script!
    There is a problem with background postion:bottom right.
    http://myplace.labor.mokka.at/index.php?id=30

    I have installed multiple IE, maybe thats the problem?
    if the box is not displayed (because of scrolling,…) the bug disappears

    any ideas?
    thanks!
    -mike

  20. Dylan Says:

    If your wife continues to give you glares for late-night code sessions, show her this comment:

    You, sir, are a GOLDEN GOD. Thank you for this script. It’s not perfect, but it’s damn close and it has saved my bacon. Much respect!

  21. Ryan Says:

    Great work on the script I did have one issue though when a background image is positioned using an em based value it doesn’t listen and will go back to a top left scenario. e.g. background: url(png.png) 0 1.455em no-repeat; will make the png act as though the 2 values are 0 0?

  22. ttupper Says:

    I’m having trouble getting selectors to work. Perhaps I am missing something. I can use ‘img’ as a selector well enough, but if I use a class name such as .someClass, it does nothing. Does the class need to be declared within the page markup? All of my CSS is declared in linked files.

  23. ennio Says:

    Hello, first thanks for great script. But I have some problems with hover. At the bottom of png_fix.js (I have renaimed it from original DD_belatedPNG_0.0.7a.js) I added “DD_belatedPNG.fix(‘*’);” and script apply fix to everything exept hover. Maybe its possible to fix it somehow?

    DEMO: http://www.ennio.lt/works/aquafilter.lt/index.html

  24. dillerdesign Says:

    ennio, I could tell you why: there’s no PNG background applied to the inactive navigation elements initially. Now that I think about it, that is a requirement. They need to be fixed in the first place for them to react to changes, and they don’t get fixed if they don’t have a PNG background applied to them from the start.

  25. ennio Says:

    Hm, part of it I have fixed with:
    _background: url(img/none.png); (none.png doesn’t exist)

    #menu a {
    _background: url(img/none.png);
    }

    and

    #menu a:hover, #menu a.act {
    background: url(img/menu_right.png) no-repeat right 0;
    }

    working good. But

    #menu a span {
    _background: url(img/none.png);
    }

    and

    #menu a:hover span, #menu a.act span {
    background: url(img/menu_left.png) no-repeat;
    }

    looks like #menu a:hover span script cant understand. Any sugestions here?

    P.S. #menu a:hover span can be fixed with:

    * html #menu a:hover span {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=’crop’, src=’img/menu_left.png’ );
    }

    but would be nice without it…

  26. Steffen Says:

    Man, i love you.

    I’ve stumbled through all png fix possibillities (and all made problems).
    I finally tried yours and it simply WORKS PERFECTLY!

    thanks again, keep up the good work!

  27. Lucas Sander Says:

    Drew,

    I read that the “one pixel gap” problem was solved with version 0.0.6a (I didn’t even experienced it before…), but I’m having an one pixel shift to the left on the background pngs. If I change the background-position-x 1 pixel more to the right, then it fixes in IE, but gets broken in all other browsers… without the script, everything is in the correct position, but not transparent.

    See http://www.ufmg.br/testpng/ for an example.

    Thanks for the great Script!!!

  28. ennio Says:

    Lucas do:

    _background-position-x 1

    or

    -background-position-x 1

    or

    * html class or id name {
    background-position-x 1
    }

    also I dont have any prob with background pngs… I think you do something wrong in css…

  29. Lucas Sander Says:

    Hello again!

    Ennio, thanks for the tip, but that was not the approach that I was willing to do. I don’t want to use hacks that would invalidate the CSS. In this case, it’s better to use conditional comments to load an extra IE specific stylesheet (or even declare directly on the head).

    I was trying to use less images (this site’s going to have an huge traffic) = less server load. But for that, I’d need pixel accurate positioning. I remembered that I’ve used DD_belatedPNG before without this problem in the following site http://www.ufmg.br/festivaldeverao/. Recapitulating what I did, I saw that I’ve used separeted images and “relative” positioning for the background-images (such as “left”, “right”, “center”, or even “0 0”).

    I tried the same thing on the site in question and it worked!! So, the problem is with pixel specific positioning in DD_belatedPNG.

    Drew, if you’d like to compare, the “fixed” version is in http://www.ufmg.br/testpng2/.

    Again, thank you veeeeeeery much for this savior script, and hope there’s a fix for this!

  30. ennio Says:

    with:

    * html class or id name {
    background-position-x 1
    }

    CSS is valid!

  31. Christian Says:

    Hi Lucas,

    I’m glad I’m not the only one with this problem. I’m also working on a very high traffic page that needs to support our beloved IE6, and this pixel-shifting problem is really nasty.

    I’m also fully on your side regarding hacks, things should just work without it. Although I could imagine to use the background-position-x 1 proposed by ennio… if this works.

    Thanks again guys, good to see that I’m not alone.

  32. Jarod Says:

    When implementing this, my background images are disappearing completely.

    I’ve followed everything to a T.

    The background images are 1px in height and repeat on y axis. When I use the below code, the background images disappear completely.


    DD_belatedPNG.fix('#container');

    • dillerdesign Says:

      Jarod, can you supply me with an example, in the form of a URL or ZIP archive?

      • phil Says:

        hi I am trying to get this PNG fix to work on the following URL:

        http://www.octophilly.com/test/about

        I am having the same disappearance problem on any of my images of divs.

        this is what I am using:

        DD_belatedPNG.fix(‘div, img’);

        I know there is lots of other jQuery and messy inline JS right now, however even removing all that the problem was still there.

        If I change the elements to just img, the divs reappear but the PNGs are not transparent. If I change to just div, the imgs reappear, so I know that the JS is taking effect, its just doing something weird.

        Please help asap this is the last thing left to launch the site and as can be expected the client has no clue why IE6 is such a PITA.

        (in the future this will be at http://www.octophilly.com/about if anyone needs to see it and the first URL is broken)

      • phil Says:

        2 other things real quick…

        My PNG images in question all have alpha transparency. (I thought that was the whole point tho?)

        Under ALTERNATIVE USAGE on the new page, you show to use the following code to get any element:

        DD_belatedPNG.fixPng( yourElement ),

        that should be

        DD_belatedPNG.fix( yourElement ),

        Correct?

      • dillerdesign Says:

        No, .fix() takes a string argument, .fixPng() takes an HTMLDomElement argument.

      • phil Says:

        Hey don’t mean to be a pain, just thought I would update you on further testing. When viewing the demo on your own site, in my version of IE6, NOTHING LOADS! That’s right!

        The only thing I can offer up is my browser version:

        6.0.2900.2096.xpsp.080413-211

        That, and the fact that this windows install is actually TinyXP installed on an old Dell I had laying around. I installed without IE or Outlook Support, however it still has the base install of IE in there if you EXPLORE a folder and then type the URL into the address bar… I usually use this as my absolute baseline testing of IE6. It is seeming to me that maybe the VML support is something that is part of one of the service packs or something? Bottom line is it doesnt work at all for me, so I will be going back to the HTC hack and find another way to tile the backgrounds. Thanks tho, this is great concept!

  33. Benoit Says:

    I don’t know if you guys noticed it, but to apply the PNG fix to ALL elements, simply do this :

    DD_belatedPNG.fix(‘*’);

    It works just fine.

    Thanks for your work, it’s the best PNG fix so far!

  34. hax Says:

    Good job! In fact, I also wrote ie png fix based on vml 3 years ago, but I found a very serious problem: http://blog.csdn.net/hax/archive/2006/11/23/1406679.aspx

    A background fix need to know the size of image, but you can’t get such info from vml (at least i can’t find the way), u need to create html image to get the size. So for one image, u will need download it twice. Even the images are in browser cache, poor vml still need to connect server and get a 304 response. Because my project need many images on any page, so vml cache issue make me go back to alphaimageloader though i realize the latter also have many many problems (10 times slower compare to vml, conflict with zoom:n (n!=1), not support palette png…)
    At a glance of your source code, I guess your solution still have the same problem though i have no time to do a full test. Do you have any idea about the cache issue?

    I also find another issue of vml today. it seems have buggy gammar correction. Though IE gammar correction also buggy but vml even worse …

  35. mark c Says:

    DD belated png: brilliant super awesome!

  36. Adam Says:

    Hi Drew, and thanks for DD_belatedPNG. I have a page that has a background PNG image assigned to a – this nodeName also seems to make IE6 crash, as adding it to the exceptions list in fixPng allows execution to continue. I don’t know if this is a generic report, or specific to the page I have, but in any case, just reporting it to you.

  37. Adam Says:

    Umm, that should be “assigned to a TABLE” – shouldn’t have actually marked it up in that last comment: sorry.

  38. ade Says:

    fixed my issues…I love you!

  39. Steve Says:

    Anyone else getting object null errors on lines 45 and 89? It has to do with references to the styleSheet object (looks like both the creation of the VML stylesheet and a reference to this.styleSheet are coming up null)… anyone seen this? Any ideas? I can see the end of my rope from where I’m sitting…

  40. Scott Says:

    Been looking for an ie6 png fix for ages. Tried about 5 different fixes and yours is the only one that doesn’t screw up the rest of my site.

    Awesome script dude!

    Cheers
    Scott

  41. PJuan Says:

    Cool script. However if I skip the IE conditional comment, I get an error on Firefox “styleSheet is undefined”. Perhaps the script could detect if it’s running on a non-IE browser?

  42. Jon Says:

    Firstly let me congratulate you on writing the _best_ IE6 png fix script, its far superior to any of the others I have tried. Enough of the back slapping, I am trying to use your script in conjunction with a css sprites menu, the problem I am having is that the hover state always places the background image one pixel out vertically compared to the inactive state, no matter what I change in the hover background position style. Do you know if your script has a problem with background position on hover for css sprites?

    • Lucas Sander Says:

      Hi Jon,

      I also had this problem with one pixel shift of the images when using css sprites and relative positioning.

      Sadly, the only solution I’ve found was to use different images (loosin the sprites advantage) in conjunction with relative positioning (pixel acurate positioning leaded to the bug…).

      Sooo, we still can’t have one sheet for all brwosers in this matter…

      • Mike Says:

        I ran into a similar issue with background positioning. Not sure whats causing this. What was your solution?

      • Lucas Sander Says:

        Mike,

        what I discovered from many tries is tha:, or u should use an CSS trick to target only IE and supply different background-position rules for different browsers (see comments above); or u should forget the sprites, use many individual images and relative brackground-positions, not pixel specific (right, intead of -152px for ex.);

        Drew, any news on this matter?

  43. Nigel Says:

    Hi Drew,

    I have a php page called default.php and have this script in the head:

    DD_belatedPNG.fix(‘#underpics, #left.column, #center.column, #right.column’);

    The div #underpics works well but all the other divs dont work at all.

    Also default.php is the php page for the rest of the site too but the fix only works on the home page??

    So to re-cap it fixes one png on the first page only.

    Any ideas?

    Nigel


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: