为什么 Webkit 无法正确重绘我的网页？
我有一个奇怪的问题。我不确定我是否搞砸了，或者这是否是 webkit 中的一个错误。
我正在做的是使用一些或多或少复杂的 CSS 技巧（：after 和内容、同级选择器等）和自定义数据属性来指示表单的输入字段是否有效。
我在每个输入字段上都有一个数据属性“data-valid”以及一个属性“data-validate”，其中包含正则表达式。在 keyup 上，我根据输入的值运行正则表达式并相应地设置数据有效。 然后，我在输入旁边有一个小 div，它使用数据有效的敏感属性选择器进行样式设置。如果同级的输入数据有效属性为 true，则背景将显示 ok 符号；如果设置为 false，则背景将显示失败符号。
因为这可能很难理解，我把这个 jsfiddle 拼接在一起，这样你就可以你自己看看吧。
所有这些在 Firefox 6 和 IE9 中都运行得非常好。但是，在两种基于 Webkit 的浏览器（Chrome + Safari）中，这不会 100% 正确运行。尽管 data-valid 属性正确更改，但样式化的 div 不会更改其外观，直到我输入其他字符或取消输入字段的焦点。看起来 Webkit 浏览器几乎无法重新绘制/重新设置该特定 div 的样式。
我真的不知道发生了什么事，但我相当有信心，这应该按照我的预期进行。我希望有人能够提出一些见解甚至解释，也许还有修复/解决方法。
多谢！
I have somewaht of a strange problem. I am not sure if I am screwing up or if this maybe even is a bug in webkit.
What I am doing is using some more or less complex CSS tricks (:after and content, sibling selector, etc) and custom data-attributes to indicate if the input fields of a form are valid or not.
I have a data attribute "data-valid" on each input field together with an attribute "data-validate", which contains a regular expression. On keyup I run the regular expression against the value of the input and set data-valid accordingly.
I then have a small div next to the input, that is styled using a data-valid sensitive attribute selector. The background will show an ok symbol if the sibling's input data-valid attribute is true and will show a fail symbol if it is set to false.
Because this might be hard to understand, I stitched together this jsfiddle, so you can look at it yourself.
All this works perfectly fine in Firefox 6 and IE9. However, in both Webkit based browsers (Chrome + Safari) this will not work 100% correctly. Allthough the data-valid attribute changes correctly, the styled div will not change it's appearance until I either input additional characters or unfocus the input field. It nearly looks like the Webkit browsers fail to repaint / restyle that particular div.
I really don't know what's going on, I am rather confident, that this should work as I expect it to. I hope someone can come up with some insight or even explaination and maybe a fix/workaround.
Thanks alot!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这一切都有点复杂，所以我不完全确定，但是对于这样的选择器：
我认为您遇到了与此问题中讨论的相同的错误：
CSS 属性选择器 + 后代在 Webkit 中出现错误？
@DADU，该问题的所有者，已经提交了错误报告，但似乎还没有任何结果。
It's all a bit complicated, so I'm not completely sure, but with selectors like this:
I think you're suffering from the same bug as discussed in this question:
CSS attribute selector + descendant gives a bug in Webkit?
@DADU, the owner of that question, has already filed a bug report, but nothing seems to have come of it yet.
我想出了一个（笨拙的）解决方法。我注意到，如果相应输入的焦点状态发生变化，指示器 div 也会更新。因此，我添加了一些 input.blur().focus() 魔法，以在每次 keyup 事件后自动取消焦点并重新聚焦输入。这不是很好，但它可以工作并使 Webkit 重新绘制同级 div。
I came up with a (clunky) workaround. I noticed, that the indicator div would update if the focus state of it's corresponding input changes. So I added some input.blur().focus() magic to automatically unfocus and refocus the inputs after each keyup event. This isn't very nice, but it works and makes Webkit repaint the sibling divs.