为什么Webkit不能正确地重新绘制我的网页？

Question

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

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

因为这可能很难理解，所以我将jsfiddle拼接在了一起，所以你可以自己查看。

所有这些在Firefox 6和IE9中完全正常。但是，在两个基于Webkit的浏览器（Chrome + Safari）中，这都不能100％正确地工作。尽管数据有效属性正确更改，但样式div不会改变它的外观，直到我输入其他字符或取消聚焦输入字段。它几乎看起来像Webkit浏览器无法重新绘制/重新设置特定的div。

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

非常感谢！

Answer 1

这有点复杂，所以我不完全确定，但选择此类：

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

我认为你正遭受与此问题中讨论的相同的错误：
CSS attribute selector + descendant gives a bug in Webkit?

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

Answer 2

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