Google Chrome, Rendering Glitch

Posted in: Google Chrome | September 4th, 2008

 

I noticed the other day at the office, after installing Google Chrome, that the browser had a slightly obnoxious rendering glitch.  It’s apparent when viewing the jQuery Growl demo page.

Basically, it boils down to this … Chrome renders PNG’s exactly as one would expect it too, the same way that Safari and Firefox handle them … transparencies are … you got it, transparent!

Do you remember the ugly IE PNG bug where it doesn’t know how to handle the transparency layer and treats the alpha pixels ‘oddly’, almost randomly picking a color of choice and replacing your alpha pixel with a 100% opaque color? Well, looks like Chrome has a similar bug, at least … visually.

When jQuery Growl appends a new notification element to the DOM, and then fades it in … Chrome goofs the rendering up and makes the transparent pixels … non-transparent.  It appears to only do this on pixels that are not 100% transparent (opacity = 0). See the screenshot below for an example:

 

Chrome Render Bug

Chrome Render Bug

 

As you can see, the corners are 100% transparent … but everything else is not … since the background image has a weird glow/drop shadow effect on it … and you can see the notifications above it that have there CSS opacity set to 100, the PNG renders perfectly.

This bug appears to be present when the DOM Element’s opacity is set to anything other then 100, such as a jQuery fadeIn or fadeOut animation that is executing.

Nice, eh?

Hopefully, they fix this bug in the next beta …

Want to Advertise on this Site?

2 Responses to “Google Chrome, Rendering Glitch”

  1. Dino Says:
    September 5th, 2008 at 7:44 am

    Yeah, I’ve noticed that Chrome bug too. To see a live demonstration of the bug, try going to taptaptap.com. You’ll be able to see clearly the wrong rendering of the opaque PNG. I’ve wrote a post about it on my blog. http://dinolatoga.com/2008/09/04/google-chrome-beta-png-opacity-bug/

  2. Jon Davis Says:
    September 25th, 2008 at 11:43 pm

    Gratz, it’s me buddy, I found your blog from a random StumbleUpon click. ;)

Leave a Reply