webkit bug: input's background gets gray without any reason on focus?

I just encountered a very annoying bug, and hard to track down. But let us get to the point:

• WEBKIT ONLY (Safari, Chrome, etc. - I reproduced this on Safari 5.1 and Chrome 13 on Mac OS Lion)
• Mac OS only? (Comments suggest this, need more input from other users)

Just go to this fiddle and focus the input: It's background turns gray! (See screenshot at Chromium Bug Tracker)

When you change the css in either the following ways, the error is gone:

• change color not something not completely white (255,255,254,0.6)
• remove transparency (255,255,255,1)
• change double-t开发者_JS百科ype border to any other (4px dotted rgba...)
• change thickness to <3px (2px double...)
• add display: inline; to the css of the <h2> (or change the tag to an inline displayed one)

So the it looks like the bug is only triggered when:

• the color of the border is exactly white with some transparency
• it must be of type double
• it's thickness must be greater than 2px
• the element must be positioned block
• it doesn't matter if some absolute positioned elements are in between the html-code (see axample): it has to do something with the rendered position of the elements

Why is it doing this? Is this a webkit bug or is there any reason behind this?

Another mention worthy thing is: The css of the block-element modified (<h2> in my example) has NOTHING to do with the input - but yet it triggers the bug. You can imagine how hard it was to debug this on a page with some more elements between these two ...

Possible Workaround:

Do not use completely white background, but: rgba(255, 255, 254, 0.6). Human eye does not notice it. But using this feels uncomfortable. Anything better?

Also on Chromium Bug Tracker now with screenshot

Not reproducible any more with latest webkit versions. Problem solved itself.