1x1 .png background's and IE 7.0.6001.18000 | The Coffeehouse

jonathansampson
stick a scissor in you eye!

Here's an interesting discovery for you. I was building a small component that would popup product names when you mouse over their thumbnail. The popup was to have a semi-transparent background, so I went with a .png file. To cut down on bandwidth, I made it 1px by 1px.

I then noticed that it was getting screwed up in IE7.0.6001.18000, so I went and looked in every other browser known to man: all others did just fine. I then tested it in IE 7.0.5730.11 and it also worked just fine - something was up. It wasn't that it didn't show up, it was HOW it rendered it. There was a gradient type of transition from the top left, to the bottom right that went from near-opaque to completely transparent.

After searching Google, and finding nothing, I decided to examine other items that were using transparent png's as backgrounds. I had plenty that didn't show any problems. The difference between them, and this problem item, were the dimensions of the backgrounds. I increased the dimensions from 1x1 to 5x5, and whammo...that solved it.

Anybody have any clue what would cause this?

Left: 1x1 .png BG --- Right: 5x5 .png BG

Duncanma
Just Coding for Fun...

I tried to find a link about this with no luck, but I remember a discussion around this with some css-loving folks and they were advising not to use too small an image when doing transparency, that the work of laying out so many copies and handling the transparency blend of each one was a small amount of work, but by increasing the size from 1x1 to 5x5 I believe you'd be reducing the # of images to render by a factor of 25....

I don't understand why it would render it the way it did though, even if it was causing a performance problem.

Is this for a public site? Care to share which one?

evildictaitor
if( !succeed( try() ) ) { while(true) try(); }

It's something to do with GDI+ and how it stretches images. I don't know how the other browsers are doing it, but I suspect them developing deliberately with more-than-one OS in-mind means that they don't use GDI+.

Basically the problem comes from the fact that GDI+ doesn't like images that are 1 pixel up or 1 pixel across - and so it extends the dimentions by adding blank (transparent black) pixels to the picture. This isn't normally a problem, unless you try and stretch the image, whereupon it becomes obvious.

You'll see the same problem if you open your image with (Right-click > Preview) and zoom in a lot.

The solution is to not use 1x1 pixels - 2x2 is probably sufficient, but because of the way the GPU works, somewhere between 5x5 and 20x20 will be less GPU intensive for drawing on large areas.

jonathansampson
stick a scissor in you eye!

In reply to Duncanma

#Dec 18th, 2008 @ 2:54 AM

It is for a public site, but the project doesn't go up for another couple of weeks. The most confusing thing for me was that it worked in one version of IE7 (7.0.5730.11) and not the other IE7 (7.0.6001.18000) - I wonder what changed between those two versions.

Regardless, it's working beautifully now, so I'm not too concerned with it Smiley

stevo_
Human after all

In reply to jonathansampson

#Dec 18th, 2008 @ 6:40 AM

IE tends to struggle with tiling anyway I've noticed you can sometimes 'witness' the tiling process when rendering is invalidated.. surely all these quirks are the fun part of being a web developer?

jonathansampson
stick a scissor in you eye!

In reply to stevo_

#Dec 18th, 2008 @ 6:43 AM

Oh yes, terrible fun Smiley

I spent 30 minutes last night trying to work around another small issue in IE. I had four spans that were acting, by direction of css of course, as image corners to a div. For some reason, any time I had a tag beneath that parent div, it would tear my previous div apart. It worked perfectly, again, in every other browser but IE7. After finding no luck on Google, and frankly not even really knowing what to search for, I moved my span's down to be the last children of the parent div, and it solved the problem. Apparently you can just have absolutely positions elements just anywhere in your relatively positioned div - they have to be in the perfect arbitrary spot.

This, Good. (can be seen here: www.sampsonresume.com/contact.php)

<div class="fancy-inset">
<div class='a'>
    <div class='b'>
      <div class='c'>
        <div class='d'>
          <div class="fancyLifter">This is a test.</div>
        </div>
      </div>
    </div>
</div>
<span class='cornerA'></span>
<span class='cornerB'></span>
<span class='cornerC'></span>
<span class='cornerD'></span>
</div>

This, Bad - Evil, Terrifying!.

<div class="fancy-inset">
<span class='cornerA'></span>
<span class='cornerB'></span>
<span class='cornerC'></span>
<span class='cornerD'></span>
<div class='a'>
    <div class='b'>
      <div class='c'>
        <div class='d'>
          <div class="fancyLifter">This is a test.</div>
        </div>
      </div>
    </div>
</div>
</div>

Of course once I got it working right, I simplified it to this:
<div class="fancy-inset">Hello World</div>

And complimented it with the following javascript:

$(document).ready(function(){
    fancyInsets();
});

function fancyInsets() {
    $("div.fancy-inset").each(function(){
        var content = $(this).html();
        $(this).html("<div class='a'><div class='b'><div class='c'><div class='d'><div class='fancyLifter'>" + content + "</div></div></div></div><span class='cornerA'></span><span class='cornerB'></span><span class='cornerC'></span><span class='cornerD'></span></div>");
    });
}