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-type 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 exactlywhite
with sometransparency
- it must be of
type double
- it's
thickness
must begreater 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