1

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!

Daniel Baulig
  • 10,739
  • 6
  • 44
  • 43

2 Answers2

1

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, the owner of that question, has already filed a bug report, but nothing seems to have come of it yet.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

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.

Daniel Baulig
  • 10,739
  • 6
  • 44
  • 43
  • So it wasn't related to the bug I linked to? – thirtydot Jul 18 '11 at 13:48
  • I still think it is. If I change the whole system from using data-attributes to indicate if a value is valid to classes (see [this fiddle](http://jsfiddle.net/WHewK/1/)) it works without the focus hack. It seems like changing focus on the inputs will trigger restyling of it's associated elements. But this is just a vague guess. – Daniel Baulig Jul 18 '11 at 14:28
  • 1
    Also have a look at [this fiddle](http://jsfiddle.net/aUCkn/27/). Allthough the "initial" bug is removed by removing the whitespaces, the elements will not react to the change of their data-attribute through JavaScript (which is pretty much my problem). – Daniel Baulig Jul 18 '11 at 14:38
  • Here is another very interesting fiddle I created: [Recreating the "focus" hack using :hover](http://jsfiddle.net/aUCkn/28/) – Daniel Baulig Jul 18 '11 at 15:47
  • Testing in Safari, that only does anything for me once I remove the JavaScript. But once I do.. that's weird :) Reminds me of [this](http://stackoverflow.com/questions/5317658/last-childafter-not-rendering-in-chrome-pseudo-element-use-issue/5317972#5317972). – thirtydot Jul 18 '11 at 15:57
  • Interesting to see that the style updates when you blur and focus it. In my particular case, I experienced a similar workaround by adding or removing a classname on the element with the attribute. – DADU Jul 18 '11 at 17:21
  • Notice the ``input.invalid:focus+div.indicator:after`` style in my first example. It "triggers" when I focus an input and causes the element, that should be styled depending on the data-attribute to be (partially) restyled. The same is true for my :hove example and I'd guess also true in the case where you add and remove classnames. I really get he feeling that setting / altering a data-attribute will simply not cause restyling, even if a style is dependent on that data attribute. Only if something else triggers restyling, the changed data-attribute will be recognized. – Daniel Baulig Jul 18 '11 at 20:37