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 (в частности, в Google Chrome стабильной Windows 7):

Сделав то же самое в Firefox:

Как вы можете видеть, селектор data-page отлично работает при начальном рендеринге страницы, но когда DOM манипулирует на лету, стили, определенные селектором [data-page="???"] CSS, соответственно не затрагиваются. Сравните это с ситуацией с селекторами классов. Когда классы меняются на лету, стили меняются, как и ожидалось.

Возможно, связанное примечание состоит в том, что я сталкивался со случаями при использовании этого селектора атрибута в сочетании с переходами CSS, когда происходит похожее отсутствие отзывчивости, но в тех случаях, когда вы щелкаете в другом месте страницы, машете мышью или ожидание немного в конечном итоге приводит к ожидаемому изменению.

Так есть ли способ обойти это, кроме как просто поднять руки и не использовать атрибуты data-page в стиле?

Answer 1

Это та же проблема, что и для ~ или нескольких + селекторов и псевдоклассов в webkit: селекторы этого типа отображаются только один раз, и в последний раз, когда я проверял соответствующие сообщения об ошибках в трекере webkit, онизаявил, что он работает как предназначен .

Но некоторые люди нашли исправление , но на самом деле это накладные расходы: добавить всегда-переформатное свойство в тело, такон должен быть добавлен только к тем элементам, где что-то меняется, для вашего примера устанавливается divs внутри поля.

Итак, есть фиксированная скрипка: http://jsfiddle.net/JVVcA/2/

И это стилидля исправления таких проблем:

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

Обратите внимание, что необходимо добавить исправление к элементу, атрибут которого можно изменить, а не к , нацеленному элементами селектора.

Answer 2

Запуск анимации кажется чрезмерно дорогим.

Благодаря Золтану Олаху я нашел гораздо более элегантный, лаконичный и эффективный обходной путь.

Простое переключение бессмысленного класса на теле.Это приведет к повторной оценке содержащихся селекторов.

Вам даже не нужно определять этот класс в 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

Answer 3

Моя версия обходного пути.

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