13

I just downloaded the IE8 full release so I could test a site I just created. [Example Deleted]

Focus on the left sidebar background image. It is suppose to be a 1x1 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar.

I had already tested this site in the normal browsers (IE7, Firefox, and Chrome). It looks exactly as I designed it in these. IE8 is FUBARed though. I tried to set IE8 to "IE7" mode but it still looks crappy. IE 8 in IE7 mode obviously isn't rendering the same way as the real IE7. Not even the "IE7 meta tag" works.

Has anyone else had problems like this? I thought IE8 was supposed to be a an improvement, not a step backwards.

P.S. Please excuse the crappy markup on this page. I used IE's "save entire page" feature.

Christian Schlensker
  • 21,708
  • 19
  • 73
  • 121
  • I'm not seeing the issue. It looks exactly the same on IE 8.0.6001.18702 as it does on FireFox 3.0.7 – mhenry1384 Mar 20 '09 at 18:12
  • I ran into this issue on the exact version mhenry1384 mentions above, IE 8.0.6001.18702. As suggested below, changing the background-image .png I was using to a 1x2 pixel solved the problem. Thanks for posting your question. – zombat Nov 16 '09 at 19:20

5 Answers5

24

It may be a rendering error in IE8, or perhaps it's some function to smooth the edges of repeated images that gives you an unexpected result. Either way it's not very surprising that you get problems using such a small image. Do you realize that the browser has to draw the image 190152 times to render the page?

I am using a 10x10 semi transparent png as background for a div in a page, and it renders just fine in IE8.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Image size doesn't matter on pattern fills in the means of performance. The software (or the hardware acceleration) sets the color of each pixel by getting the offseted pixel color on the fill pattern mathematically. So the pixel in (10,10) will be filled by (5,5) of a 5x5 pattern, (2,2) of a 4x4 pattern, or (1,1) of a 1x1 pattern. Even more, a 1x1 pattern can be given a special case, which means all area will be filled with a solid color, and this can increase the speed for some platforms. So, don't hesitate using 1px helpers where needed. – DarkWingDuck Nov 17 '10 at 07:09
  • @SuperDuck: The size shouldn't matter, but obviously it does. I remember Netscape 4 where repeating images didn't work at all unless they were several pixels wide... – Guffa Nov 17 '10 at 08:46
  • Yeah, it mattered because of some bugs. But I mean not performance-wise (ie. number of tiles doesn't make a difference). 1x1 images are very commonly used by software including Dreamweaver and MS. Anyway, I see you concern and that's why I used to use wider images during the Netscape era. – DarkWingDuck Nov 18 '10 at 12:23
  • 2
    This is utterly unbelieavable! But thank you so much for providing an easy fix. – wagi Dec 14 '10 at 15:03
  • 2
    Agreed with @Michael, this is unbelievable. This is a hard bug to even FIND on Google, because searching for any permutation of "IE", "PNG", "Transparent", & "Background" is such a cluster f#*& of search results. THANK YOU, this did indeed work for me. – Slobaum Apr 15 '11 at 16:12
2

I fixed the bug and it isn't the gamma issue that is mentioned in that other post. My issue was being caused by the fact that the image is 1x1 pixel in size. I just changed it to 1x2 and it fixed the problem. Weird

[edit] Just saw Guffa's post after i asked this. See his for answer.

Christian Schlensker
  • 21,708
  • 19
  • 73
  • 121
  • 5
    I'd definitely make it bigger than that. Really small background images have caused horrendous performance problems in browsers of the past. Bumping it up to, say, 64x64 wouldn't cost you much file size. – bobince Mar 20 '09 at 19:51
  • 1
    I tried first with gamma correction using pngcrush - didn't work - so i tried this approach - 5x5 px image still didn't take it, neither did 10x10 - so tried with 64x64 and it works magicaly. – easwee Jun 04 '10 at 14:09
1

I had a similar issue with a site I'm building. The issue only occurred on 50% of the machines with ie8 it was tested on, I was building it for an IT firm so had access to lots of computers. We were able to "fix" the problem by toggling Hardware Acceleration on the problem machines, not that thats really a fix at all.

1

Thanks for the help on this issue -- what a weird bug.

I was also experiencing the issue on 50% of the computers running IE8 (had access to quite a few machines). When I had a 1x1px semi-transparent png set as a background image on a div with CSS, IE would render this as a funky vertical, transparent gradient.

Changing the source image to a 5x5px png of the same opacity fixed the bug... go IE!

Drew
  • 11
  • 1
1

The problem was my original png was 1×1, and for whatever reason IE8 was not liking trying to tile that and handle the alpha transparency at the same time. When I accidentally saved that image with a much larger copy I had on my clipboard, 100×100, it ended up fixing whatever problem Internet Explorer was having with processing the png’s transparency.

Source

gcamp
  • 14,622
  • 4
  • 54
  • 85
Bob Fanger
  • 28,949
  • 7
  • 62
  • 78