html - Webkit (Chrome/Safari) 在选择的自定义属性更改时不更新显示

Question

工作示例: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 中点击“Highlight page two”和“Highlight page four”后(具体来说，Google Chrome stable Windows 7):

在 Firefox 中执行相同操作后:

如您所见，data-page 选择器在页面的初始呈现时工作正常，但是当动态操作 DOM 时，[ 定义的样式data-page="???"] CSS 选择器不会受到相应影响。将此与类选择器的情况进行比较。当动态更改类时，样式会按预期更改。

一个可能相关的注意事项是，我在将此属性选择器与 CSS 转换结合使用时遇到过类似的缺乏响应的情况，但在这些情况下，单击页面上的其他位置，四处挥动鼠标，或者只是稍等片刻，最终会导致预期的变化发生。

那么，除了举手投降而不使用 data-page 样式的属性之外，还有其他解决方法吗？

Answer 1

这与应用于 ~ 或多个 + 选择器和 webkit 中的伪类的问题相同:这种选择器只渲染一次，也是我最后一次渲染检查了 webkit 跟踪器中的相关错误报告，他们说它像预期的一样工作。

但是，有些人有 found the fix ，但这确实是开销:向正文添加始终回流属性，因此必须仅将其添加到那些发生变化的元素，例如字段集内的 div。

所以，有一个固定的 fiddle :http://jsfiddle.net/JVVcA/2/

这些是解决此类问题的样式:

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

请注意，您必须将修复添加到属性为可更改的元素，而不是选择器元素的目标。