webkit bug: input's background gets gray witho

2019-07-28 19:06发布

问题:

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 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

回答1:

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