Webkit (Chrome / Safari) does not refresh the display when the selected custom attribute changes

Question

Working example: http://jsfiddle.net/JVVcA/

HTML:

<fieldset id="data-page"> <legend>data-page</legend> <button rel="page1">Highlight page one</button> <button rel="page2">Highlight page two</button> <div data-page="page1"> <h1 id="page1">Page one</h1> <h1 id="page2">Page two</h1> </div> </fieldset> <fieldset id="class"> <legend>class</legend> <button rel="page3">Highlight page three</button> <button rel="page4">Highlight page four</button> <div class="page3"> <h1 id="page3">Page three</h1> <h1 id="page4">Page four</h1> </div> </fieldset> 

CSS

 fieldset { border: 1px solid #aaa; padding: 5px; } h1 { background-color: white; } div[data-page="page1"] h1#page1 { background-color: pink; } div[data-page="page2"] h1#page2 { background-color: pink; } div.page3 h1#page3 { background-color: cyan; } div.page4 h1#page4 { background-color: cyan; } 

JS:

 $('#data-page button').click(function(){ var rel = $(this).attr('rel'); $(this).siblings("div").attr('data-page', rel); }); $('#class button').click(function(){ var rel = $(this).attr('rel'); $(this).siblings("div").attr('class', rel); }); 

Initial load:

After clicking the “Select Page Two” and “Select Page Four” buttons in Webkit (in particular, in Google Chrome for Windows 7):

After that in Firefox:

As you can see, the data-page selector works fine when the data-page is initially rendered, but when the DOM is controlled on the fly, the styles defined by the CSS [data-page="???"] selector do not affect accordingly. Compare this to the situation with class selectors. When classes change on the fly, styles change as expected.

Perhaps this is due to the fact that I encountered situations when using this attribute selector in combination with CSS transitions in which a similar lack of reaction occurs, but in these cases, clicking elsewhere on the page, waving the mouse or just waiting for a bit in the end the result leads to the expected change.

So, is there a way around this otherwise than just raising your hands and not using data-page style attributes?

Answer 1

This is the same problem as for the ~ or multiple + selectors, and several classes in webkit: this kind of selectors is displayed only once, and the last time I checked the corresponding error reports in the webkit tracker, they said that it works, like was supposed.

But some people have found a fix , but it’s actually an overhead: adding an always returning property to the body, so you need to add it only to those elements where something is changing, for your example, the div fields inside the fields are set.

So there is a fixed fiddle: http://jsfiddle.net/JVVcA/2/

And these are the styles to fix such problems:

 /* The `fixing` animation */ @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } .anElementToFix { -webkit-animation: bugfix infinite 1s; } 

Note that you must add a correction to an element whose attribute can be changed, rather than the target using selector elements.

Answer 2

My version of the workaround.

 $('#data-page button').click(function(){ var rel = $(this).attr('rel'); var my_div = $(this).siblings("div"); my_div.attr('data-page', rel); var my_html = my_div.html(); my_div.html(my_html); }); $('#class button').click(function(){ var rel = $(this).attr('rel'); $(this).siblings("div").attr('class', rel); }); 

Answer 3

Running animations seems too expensive.

Thanks to Zoltan Ola, I found a much more elegant, concise, and effective workaround.

Just switch to the body a meaningless class. This will re-evaluate the contained selectors.

You don't even need to define this class in CSS. Just by applying this, you get Safari to look for a page that reevaluates things.

Each time you change this attribute, enable or disable this class to force a reevaluation.

 // change some attribute $(".blah").attr("state", "otherState"); // example of changing an attribute (your app will be different) $('body').toggleClass('zoltan'); // THIS IS THE LINE YOU MUST ADD EVERY TIME YOU CHANGE THE ATTRIBUTE