爲什麼Webkit不能正確重繪我的網頁？

Question

我有一些奇怪的問題。我不確定我是否搞砸了，或者這可能是webkit中的一個bug。

我在做什麼是使用一些或多或少複雜的CSS技巧（：後和內容，兄弟選擇器等）和自定義數據屬性來指示表單的輸入字段是否有效。
我有一個數據屬性「數據有效」每個輸入字段連同一個屬性「數據驗證」，其中包含一個正則表達式。在keyup上，我對輸入的值運行正則表達式並相應地設置data-valid。 然後，我在輸入旁邊有一個小格子，使用數據有效的敏感屬性選擇器進行樣式設置。如果兄弟的輸入數據有效屬性爲true，背景將顯示一個ok符號，如果它設置爲false，則會顯示一個失敗符號。

因爲這可能很難理解，所以我把這個jsfiddle拼在一起，所以你可以自己看看。

所有這些在Firefox 6和IE9中都能很好地工作。但是，在基於Webkit的瀏覽器（Chrome + Safari）中，這不會100％正確工作。雖然數據有效屬性正確改變，但是直到我輸入附加字符或者忽略輸入字段，樣式div纔會改變它的外觀。它幾乎看起來像Webkit瀏覽器無法重新繪製/ restyle特定的div。

我真的不知道發生了什麼，我很自信，這應該工作，因爲我期望它。我希望有人能夠提出一些見解或解釋，也許是一種修復/解決方法。

非常感謝！

Answer 1

這一切都有點複雜，所以我不能完全肯定，但這樣的選擇：

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

我認爲你從同樣的bug痛苦在這個問題討論：
CSS attribute selector + descendant gives a bug in Webkit?

@DADU，這個問題的擁有者，已經提交了一個bug報告，但似乎還沒有來了吧。

Answer 2

我想出了一個（笨拙的）解決方法。我注意到，如果對應輸入的焦點狀態發生變化，指示器div將會更新。所以我添加了一些input.blur（）。focus（）魔法，以便在每次鍵入事件後自動對焦並重新對焦輸入。這不是很好，但它可以工作，並使Webkit重畫兄弟的div。