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

心已入冬 提交于 2020-01-06 02:00:25

问题


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.



来源:https://stackoverflow.com/questions/7071345/webkit-bug-inputs-background-gets-gray-without-any-reason-on-focus

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!