更改所选的自定义属性时，WebkitChrome / Safari不会更新显示

如何解决更改所选的自定义属性时，WebkitChrome / Safari不会更新显示

|| 工作示例：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);
});

初始负载：在Webkit中单击\“突出显示第二页\”和\“突出显示第四页\”（具体来说，谷歌浏览器稳定的Windows 7）后：在Firefox中执行相同的操作后：如您所见，data-page选择器在页面的初始呈现上工作正常，但是当动态操作DOM时，[data-page=\"???\"]CSS选择器定义的样式不会受到相应影响。将此与类选择器的情况进行比较。即时更改类时，样式会按预期更改。一个可能相关的注释是，我在结合使用CSS和CSS过渡时使用这种属性选择器时遇到过类似的情况，但是在这种情况下，请单击页面上的其他位置，挥舞鼠标或只是等待最终会导致预期的变化通过。因此，除了举起手来而不使用data-page样式的属性之外，还有其他方法吗？

解决方法

这与Webkit中的~或多个+选择器和伪类所应用的问题相同：这种选择器仅呈现一次，上次我在webkit的跟踪器中检查了相关的错误报告，他们表示它的工作原理与预期的一样。但是，有些人找到了此修复程序，但这确实是开销：将始终回流的属性添加到主体，因此必须仅将其添加到那些发生变化的元素中，字段中的div设置为你的例子。因此，有一个固定的小提琴：http://jsfiddle.net/JVVcA/2/ 这些是解决此类问题的样式：

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

请注意，必须将修订添加到可以更改其属性的元素，而不是选择器元素作为目标的元素。 , 我的解决方法版本。

$(\'#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);
});

, 运行动画似乎过于昂贵。多亏了Zoltan Olah，我发现了一个更加优雅，简洁和有效的解决方法。简单地在身体上切换一个废话类。这将导致对包含的选择器进行重新评估。您甚至不必在CSS中定义此类。仅仅应用它就会迫使Safari浏览页面重新评估事物。每次更改有问题的属性时，请打开或关闭此类，以强制进行重新评估。

// 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