Safari Text Replacement Bug

Credit goes to my homeslice Rick Nunn this afternoon for discovering a fairly major bug in the new JavaScript text replacement I’ve recently developed and implemented on this site.

Of course, had I bothered to test it at all using Safari I might have noticed it myself. But that’s not the point. So, thanks Rickzor.

So, the problem is that the plugin, when run through Safari, is failing to determine a background colour resulting in the images being anti-aliased onto black.

The function gpc which handles the determination of background-color is supposed to walk back up the DOM starting from the parent element all the way back up to html. I’ll have to look into why this doesn’t occur corectly in Safari.

The Code

function gpc(node) {
for ( ; node && node.nodeName.toLowerCase() !=
'html'; node = node.parentNode ) {
var v = jQuery.css(node,'backgroundColor');
if ( v.indexOf('rgb') >= 0 ) {
rgb = v.match(/\d+/g);
return hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
}
if ( v && v != 'transparent' )
return v;
}
return 'ffffff';
};
The very same problem has in fact already been noticed by Dave Methvin of jQuery Corner, who suggests explicity setting a background-color on the parent element.

Of course, this isn’t ideal, and in some cases setting a background colour is not possible. To workaround this i’m planning on modifying the plugin to allow you to pass an explicit background colour at runtime if necessary, which will override the colour obtained from the DOM. This would also have the added benefit of allowing you to fine tune the antialiasing when the text being replaced sits above a background image.