为什么 Webkit 不能正确重绘我的网页？答案

【问题标题】：Why will Webkit not repaint my webpage properly?为什么 Webkit 不能正确重绘我的网页？
【发布时间】：2011-10-07 09:01:40
【问题描述】：

我遇到了一个奇怪的问题。我不确定我是否搞砸了，或者这甚至可能是 webkit 中的一个错误。

我正在做的是使用一些或多或少复杂的 CSS 技巧（:after 和 content、兄弟选择器等）和自定义数据属性来指示表单的输入字段是否有效。
我在每个输入字段上都有一个数据属性“data-valid”以及一个包含正则表达式的属性“data-validate”。在 keyup 上，我针对输入的值运行正则表达式并相应地设置 data-valid。然后我在输入旁边有一个小 div，它使用数据有效的敏感属性选择器设置样式。如果兄弟的 input data-valid 属性为 true，则背景将显示一个 ok 符号，如果设置为 false，则将显示一个失败符号。

因为这个可能比较难理解，所以我把这个jsfiddle拼接在一起，大家可以自己看。

所有这些都在 Firefox 6 和 IE9 中运行良好。但是，在这两种基于 Webkit 的浏览器（Chrome + Safari）中，这不会 100% 正确工作。尽管 data-valid 属性正确更改，但样式化的 div 不会改变它的外观，直到我输入其他字符或取消聚焦输入字段。看起来 Webkit 浏览器几乎无法重新绘制/重新设置特定 div 的样式。

我真的不知道发生了什么，我相当有信心，这应该按我的预期工作。我希望有人能提出一些见解甚至解释，也许是一个修复/解决方法。

非常感谢！

【问题讨论】：

标签： javascript jquery css dom webkit

【解决方案1】：

我想出了一个（笨拙的）解决方法。我注意到，如果相应输入的焦点状态发生变化，指示器 div 会更新。所以我添加了一些 input.blur().focus() 魔术来在每个 keyup 事件之后自动取消焦点并重新聚焦输入。这不是很好，但它可以工作并使 Webkit 重新绘制兄弟 div。

【讨论】：

所以它与我链接的错误无关？
我仍然认为是。如果我将整个系统从使用数据属性更改为指示值是否对类有效（请参阅this fiddle），它可以在没有焦点黑客的情况下工作。似乎改变对输入的关注将触发其相关元素的重新样式化。但这只是一个模糊的猜测。
也看看this fiddle。尽管通过删除空格删除了“初始”错误，但元素不会通过 JavaScript 对其数据属性的更改做出反应（这几乎是我的问题）。
这是我创建的另一个非常有趣的小提琴：Recreating the "focus" hack using :hover
在 Safari 中进行测试，只有在我删除 JavaScript 后才能为我做任何事情。但是一旦我这样做了..那很奇怪:)让我想起了this。

【解决方案2】：

这有点复杂，所以我不完全确定，但是使用这样的选择器：

input[data-valid="true"]+div.indicator

我认为您遇到了与此问题中讨论的相同的错误：
CSS attribute selector + descendant gives a bug in Webkit?

该问题的所有者@DADU 已经提交了错误报告，但似乎还没有任何结果。

【讨论】：

这看起来至少非常相似。感谢您向我指出这一点。