Timbru

Update, 27th of April 2005: This is fixed in the new Safari 1.3 for Mac OS 10.3.9, which is supposed to be using the same parser as Safari 2.0 for Tiger.

I’ve recently run into a very annoying Safari rendering problem. It involves checkable input elements on a block with text-indent: negativeValue and other block elements inside. If the radio-button or check-box is outside the content area, it can’t be clicked.

You can see an example below. It’s an iframe, so you can simply View Source if you right-click inside.

Try to activate each check-box, you will notice the following:

• the problem occurs only for elements that have a block element brother and are on the indentation/padding area; this means I and III
• I.1, I.2 and III.1 work because their container element has no block element children.
• IIIb also works because it’s inside the content area.

I know that using negative alignment values puts the elements outside the content area, and this may make Safari’s rendering technically correct. However, letting the input elements have a life outside the content area may be correct as well, it’s what other browsers do and the behaviour any reasonable person would expect.

It’s a shame, because AFAIK this is the finest way to build a list of checkbox/radio buttons. It’s also a shame because my boss – recent switcher – would run our product demos with Safari instead of Camino and most important because I already use it in our pricing application web interface :-(

PS: I know the above paragraph may be classified as whining, but this is more that a bug report, it’s a post on my web log.

PPS: I just discovered the weirdest thing: if you click or select some text in the block element that contains the input element, you can then check the element. It’s like clicking the LI brings the element on-top. Weird.