Google Chrome, Rendering Glitch

 

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:

 

 

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 …

WordPress Growl … thoughts?

I am currently working on integrating my recently released ‘jQuery Growl‘ with WordPress 2.5, as an administrative plugin.  Allowing a logged in Site Admin (User Level >= 10) to be notified of system messages such as ‘Comment Posted’, ‘User Logged In’, ‘Post Published’, etc … as well as allowing the site administrator to enable the ‘whose looking’ feature which will just log all requests to the site and notify the administrator of every page request …

Now, due to the large number of requests that would be created if this was ‘literally real-time’, I’m thinking of limiting the checks to every 10 seconds (possibly providing an override in the options?) and only retrieving the last 10 notices … if any of them are found in your current ‘notice stack’, then it will ignore it — keeping the internal ‘notice stack’ to 10 items or so.

With that said, I’m curious as to whether or not this is a useless feature, or if people would actually use it

So, let me know.

jQuery Growl 1.0 Released

I’ve just released jQuery Growl 1.0 ‘Preview’ and submitted it to the jQuery Plugin Repository. jQuery Growl is a jQuery based version of Growl for OS X.

The ‘home page’ for this plugin is currently located here on Fragmented Code.

I have lots to do to ‘finish this up’, but this is a pretty solid ‘preview release’ and is now open to the general public. I implemented something very close to this at the office on Friday, and just couldn’t resist releasing a jQuery Plugin (the one at the office uses jQuery, but is tied heavily into the ‘framework’ we’re building there — its currently proprietary, so … don’t bother asking, but we may release bits and pieces to the public at some point).

A co-worker likes to point out my ‘lack of support for IE’ when I release code snippets, and … as such, he pointed out the same ‘lack of support’ with my jQuery Growl ‘demo’ template … my response is,

if you can get IE to act right, I’ll support it

With that said, the demo looks a little ‘odd’ in IE — however, the demo uses a ‘custom’ template, the default template works perfectly fine (last I checked it, which was a while ago, *shrug*). The demo is a perfect example of ‘templating’ the output though … and your welcome to create as many IE-friendly templates as you want …

And, on that note … if you create any custom templates, please, let me know, I’d love to show case them with the plugin …