Webkit (Chrome/Safari) does not update display when custom attribute selected is changed

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 "Highlight page two" and "Highlight page four" in Webkit (specifically, Google Chrome stable Windows 7):

After doing the same in Firefox:

As you can see, the data-page selector works fine on the initial rendering of the of the page, but when the DOM is manipulated on the fly, styles defined by the [data-page="???"] CSS selector are not affected accordingly. Compare this to the situation with the class selectors. When classes are changed on the fly, the styles change as expected.

A possibly related note is that I've encountered cases while using this attribute selector in conjunction with CSS transitions where a similar lack of responsiveness happens, but on those cases, clicking elsewhere on the page, waving your mouse around, or just waiting for a bit eventually results in the expected change going through.

So is there a way around this other than to just throw up your hands and not use data-page-style attributes?

Answer 1

It's the same issue that's applied for the ~ or multiple + selectors and pseudo-classes in webkit: this kind of selectors are rendered only once and the last time I checked the relevant bug reports in webkit's tracker, they stated that it works like intended.

But, some people had found the fix, but it's really is overhead: to add always-reflowing property to body, so it's must be added only to those elements, where something changes, the divs inside field sets for your example.

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

And these are the styles for fixing 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 the fix to the element whose attribute is can be changed, not the targeted by selector elements.