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

问题描述

默认情况下隐藏所有项目的列表，第一个 li 具有 block 的 display.问题是如果第一个元素被删除，这将不会更新，实际上是创建一个应该显示的新的第一个子元素.在 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 选择器本身的问题.

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 的值如何，它都不应再是其父级的第 n 个子级，因此下一个元素成为第一个孩子的应该相应地匹配 :first-child.

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 更改为 :not(:last-child)，例如 this，这样您就有两个元素同时显示，当您单击按钮时，您会在 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 选择器添加新的空规则:

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) {}

一切都会突然在 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 错误:当使用 JS 删除项目时，first-child 不更新 display:block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！