Ошибка Safari: первый ребенок не обновляет отображение: блокировка при удалении элементов с помощью JS

Question

Со списком элементов, где все скрыты по умолчанию, первый li имеет display из block, Проблема в том, что это не будет обновляться, если удаляется первый элемент, де-факто создавая нового перво-дочернего элемента, который должен отображаться. В Safari новый li что должно показывать не отображается.

HTML

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<button>click me </button>

CSS

.list .item { display: none } 
.list .item:first-child { display:block}

JS

$('button').on('click', function(e) {
  $('ul li:first').remove().appendTo($('ul'));
});

Смотрите скрипку: http://jsfiddle.net/BFTan/1/

Во всех других браузерах нажатие кнопки будет переключаться между пунктами, но в Safari ничего не обновляется.

Answer 1

Это кажется проблемой с display: none и объекты удаляются из дерева документов, которое проявляется при использовании :first-child, а не проблема, присущая Safari обработке :first-child сам селектор.

В любом случае, это определенно ошибка. jQuery не уничтожает объект, даже когда вы отсоединяете его (и его содержимое) от его родителя, но когда отсоединяете элемент от его родителя, он больше не должен быть n-м дочерним элементом своего родителя при любом значении n, поэтому следующий элемент который становится первым ребенком должен соответствовать :first-child соответственно.

Если вы измените :first-child в вашем коде :not(:last-child)Примерно так, что у вас одновременно отображается два элемента, вы заметите в Safari, когда вы нажимаете кнопку, первый элемент исчезает, оставляя второй элемент без изменений (а также третий, который все еще скрыт).

Я также обнаружил, что если вы добавите новое пустое правило с :empty селектор в самом списке:

/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}

В Safari все будет работать правильно. Еще более странным является то, что этот обходной путь не работает с любым другим псевдоклассом 3-го уровня. Работает только с :empty или же :not(:empty),