css - 网络套件错误 : input's background gets gray without any reason on focus?

Question

我刚刚遇到了一个非常烦人的错误，而且很难追踪。但让我们进入正题:

• 仅限 WEBKIT(Safari、Chrome 等 - 我在 Mac OS Lion 上的 Safari 5.1 和 Chrome 13 上复制了它)
• 仅限 Mac 操作系统？ (评论表明这一点，需要其他用户的更多意见)

只需转到 this fiddle并聚焦输入:它的背景变成灰色! (请参阅 Chromium Bug Tracker 处的屏幕截图)

---

当您通过以下任一方式更改 css 时，错误消失:

• 改变颜色而不是不完全是白色的东西 ( 255,255,254,0.6 )
• 去除透明度(255,255,255,1)
• 将 double-type 边框更改为任何其他 (4px dotted rgba...)
• 将厚度更改为 <3px ( 2px double... )
• 添加display: inline;到 <h2> 的 css (或将标签更改为内联显示的标签)

所以看起来这个错误只在以下情况下触发:

• color边界正好是white与一些transparency
• 它必须是type double
• 是thickness必须是 greater than 2px
• 元素必须是positioned block
• 如果某些绝对定位元素位于 html 代码 ( see axample ) 之间并不重要:它必须对元素的呈现位置做一些事情

为什么要这样做？这是 webkit 错误还是背后有任何原因？

---

另一件值得一提的事情是:修改的 block 元素的 css(在我的示例中为 <h2>)与输入无关 - 但它会触发错误。你可以想象在这两者之间有更多元素的页面上调试它是多么困难......

---

可能的解决方法:

不要使用完全白色的背景，而是:rgba(255, 255, 254, 0.6) .人眼不会注意到它。但是用这个感觉不舒服。还有更好的吗？

---

也在 Chromium Bug Tracker 上现在有截图

Answer 1

不能再用最新的 webkit 版本重现。问题自行解决。