webkit bug：输入的背景在焦点没有任何原因的情况下变灰？
我刚刚遇到了一个非常烦人的错误，并且很难追踪。但让我们直奔主题：
- 仅限 WEBKIT（Safari、Chrome 等 - 我在 Mac OS Lion 上的 Safari 5.1 和 Chrome 13 上复制了此内容）
- 仅限 Mac OS？ （评论表明这一点，需要其他用户的更多输入）
只需转到 this fiddle 并集中输入： 背景变成灰色！ （请参阅 Chromium Bug Tracker 中的屏幕截图）
当您更改 css 时通过以下任一方式，错误都会消失：
- 更改颜色而不是不完全白色的东西（
255,255,254,0.6） - 删除透明度(
255,255,255,1) - 将双型边框更改为任何其他 (
4px dotted rgba...) - 将厚度更改为 <3px (
2px double...） - 将
display: inline;添加到的 css （或将标签更改为内联显示的标签），
因此它看起来像错误是仅在以下情况下触发：
- 边框的
颜色恰好是白色，具有一定的透明度， - 它必须是
双精度型， - 它是
厚度必须大于2px - 元素必须是
定位块 - 如果某些绝对定位元素位于html代码之间也没关系(参见示例）：它必须对元素的渲染位置做一些事情
为什么要这样做？这是一个 webkit 错误还是背后有任何原因？
另一个值得一提的事情是：修改的块元素的 css（在我的示例中为
可能的解决方法：
不要使用完全白色的背景，但是：rgba(255, 255 , 254, 0.6)。人眼不会注意到它。但用起来感觉不舒服。还有更好的吗？
另外，Chromium Bug Tracker 现已提供屏幕截图
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
colorof the border is exactlywhitewith sometransparency - it must be of
type double - it's
thicknessmust 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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
最新的 webkit 版本无法再重现。问题自己解决了。
Not reproducible any more with latest webkit versions. Problem solved itself.