Safari bug：first-child不更新显示：当使用JS删除项目时阻止 [英] Safari bug :first-child doesn't update display:block when items are removed with JS

问题描述

在默认情况下隐藏所有项目的列表中，第一个 li 有显示 c $ c> block 。问题是，如果第一个元素被删除，事实上做一个新的第一个孩子应该显示，这不会更新。在Safari中，不会显示应显示的新 li 。

With a list of items where all are hidden by default, the first li has a display of block. The problem is that this won't update if the first element is removed, de facto making a new first-child which should be displayed. In Safari the new li that should show is not displayed.

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中没有更新。

In all other browsers clicking the button will cycle through the items but in Safari nothing updates.

推荐答案

这似乎是 display：none 当你使用：first-child ，而不是Safari处理：first-child selector本身。

This appears to be a problem with display: none and objects removed from the document tree which manifests itself when you use :first-child, rather than a problem intrinsic to Safari's handling of the :first-child selector itself.

无论如何，这绝对是一个错误。 jQuery不会销毁对象，即使当你从父对象中分离它（和它的内容），但是当从父对象中分离一个元素时，它不应该是它的父对象的第n个子对象，所以下一个元素

Either way, this is definitely a bug. jQuery doesn't destroy the object even when you detach it (and its contents) from its parent, but when detaching an element from its parent it should no longer be the nth child of its parent for whatever value of n, so the next element that becomes the first child should match :first-child accordingly.

如果你改变，那么成为第一个孩子应该匹配：first-child ：first-child 代码中的：not（：last-child），如这个，让你一次显示两个元素，你会注意到在Safari中，当你点击按钮第一个元素消失，留下第二个元素

If you change :first-child in your code to :not(:last-child), like this, such that you have two elements displaying at a time, you'll notice in Safari when you click the button the first element disappears, leaving the second element intact (as well as the third which is still hidden).

我还发现如果你添加一个新的空规则与：empty selector on the list itself：

I also found that if you add a new empty rule with the :empty selector on the list itself:

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

href =http://jsfiddle.net/BoltClock/BFTan/4 =nofollow>在Safari中正常运行。更奇怪的是，这种解决方法不适用于任何其他3级伪类。它只适用于：empty 或：not（：empty）。

Everything will suddenly work correctly in Safari. Even more bizarre is that this workaround does not work with any other level 3 pseudo-class. It only works with :empty or :not(:empty).

这篇关于Safari bug：first-child不更新显示：当使用JS删除项目时阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！