Ie8's Rendering of Transparent Pngs Is Fubared on My Site

IE8's rendering of transparent pngs is FUBARed on my site

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.

IE 8 specific background-image bug

Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...

A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.

See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.

EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?

Background colour of a PNG in IE8

You have a gamma correction information (gAMA chunk) structure in your PNG. That's fine if you're working with photos where you want gamma correction, but it's not the right thing for the web.

On the web, browsers typically do not apply gamma correction to HTML/CSS colours or other images, so if you use gamma correction you'll get results on your PNG that are inconsistent with the rest of the page. Some browsers do not apply PNG gamma for this exact reason, which is why you are getting the variable results.

Load the logo into an image editor and save it back out without the gAMA chunk information. More.

IE8 Inconsistent Rendering when Reloading

Not an answer, but since I can't comment yet...

I can confirm this behaviour using IE8 on an internal site I maintain. The site was always targeted for Firefox but now they are asking me to fix up some of more glaring IE issues. At first I added the IE7 compat meta key, but kept seeing weird rendering when I refreshed the page. Thought it might be the meta key so I took that out and I still get the issue.

When the page is loaded fresh (enter in the address bar) everything looks great. Hit refresh and several issues crop up, including box model sizing and float/clear ordering issues.

I just confirmed this on another site of mine - renders perfect on first load - hit refresh and it all goes to hell.

The fact that I cannot find other mentions of this behaviour causes me some worry that I am doing something wrong - but my sites all work in Firefox/Chrome/Safari across windows and mac, and previously worked well enough in IE7.

Double images in IE8

try changing your product_thumb_bg class in your css, remove the width and height :

.products_thumb_bg {
    /* show product image as background */        
    float: left;        
    margin: 10px 0px;
}

IE8 ignoring background no-repeat value

The FORM elemement was terminated within a DIV element that started after it did. That is, the document was not "well formed" in XML parlance.

Watin - IE8 hangs on FileUpload.Set

Turns out this line in the WatiN source was the problem:
if (Process.GetProcessById(window.ProcessID).ProcessName != "iexplore") return;

For some reason, the iexplore process on this machine appears as "IEXPLORE", in all caps. Adding a .ToLower() to the process name fixes the problem.

edit: looks like this bug has already been reported.

IE8 Password field showing entered value instead of showing asterisks

I'm guessing here because I don't want to go through all your code but I imagine you are replacing a <input type="text" /> with <input type="password" /> when the user has focus on the input. I don't think that is the best cross browser solution.

If you want to support older browsers you will need to use a javascript solution as the HTML5 placeholder value won't work on all browsers.

A good solution is using the <label> tag positioned under the input instead of faking it. For a good example see: http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

The advantages of this solution includes cross browser compatibility, accessibility and semantic markup.

---

Related Topics