为什么Webkit不能正确重绘我的网页？ [英] Why will Webkit not repaint my webpage properly?

问题描述

我有一个奇怪的问题。

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.

我在做的是使用一些或多或少的复杂的CSS技巧（： after和content，sibling selector等）和自定义数据属性来指示表单的输入字段是否有效。

我在每个输入字段上都有一个数据属性data-valid具有属性data-validate，其包含正则表达式。在keyup上，我相对于输入的值运行正则表达式，并设置data-valid。
然后在输入旁边有一个小div，它使用数据有效的敏感属性选择器来设置样式。如果兄弟的输入数据有效属性为true，背景将显示一个ok符号，如果设置为false，则会显示一个失败符号。

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.

因为这可能很难要了解，我已将此 jsfiddle 拼接在一起，以便您自己查看。

Because this might be hard to understand, I stitched together this jsfiddle, so you can look at it yourself.

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

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.

非常感谢alot！

推荐答案

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

It's all a bit complicated, so I'm not completely sure, but with selectors like this:

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

您遇到的问题与此问题中讨论的相同：

I think you're suffering from the same bug as discussed in this question:
CSS attribute selector + descendant gives a bug in Webkit?

@DADU，所有者可以使用CSS属性选择器+的问题，已经提交了一个错误报告，但似乎还没有到来。

@DADU, the owner of that question, has already filed a bug report, but nothing seems to have come of it yet.

这篇关于为什么Webkit不能正确重绘我的网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！