Many Mac users prefer Safari to less attractive, but more standards compliant Gecko-browsers. When we talk about CSS and DOM support, Safari is overall nice browser. There are, however, a few more or less annoying bugs. If somebody from Apple listens, it would be really great if you could fix some of those. Until they do something about it, here’s a quick overview with a workaround where applicable.

Click on a label doesn’t trigger radios and checkboxes

This is more of an accessibility/usability issue and can be solved with a simple JavaScript snippet (an example):

function fix_labels() {
    var lbls = document.getElementsByTagName('label');
    for (var i = 0; i < lbls.length; i++) {
        var lbl = lbls[i];
        lbl.onclick = check_it;
        lbl.onkeypress = check_it;
    }
}
function check_it() {
    var ipt = document.getElementById(this.htmlFor);
    if (!ipt) return;
    ipt.checked = (ipt.type == 'checkbox') ? (ipt.checked) ? false : true : (ipt.type == 'radio') ? true : false;
}
onload = fix_labels;

Min-height

This often needed functionality can be partially solved by defining height of an element in ems. However, that will break if text falls into few rows due to text resizing. Dave of Mezzoblue affix explained workaround, but the bug is still pain in the a**.

Hexadecimal color defined in CSS doesn’t match it’s PNG equivalent

Felt really stupid seeing my web site in Safari for the first time. Header graphic didn’t match background color. The solution is either avoiding a combination of PNG and background-color property or using GIFs only. The same bug is present in Internet Explorer, but that’s another story…

So, what are your most frequent Safari bugs?