javascript - Safari bug :first-child doesn't update display:block when items are removed with JS - Stack Overflow

admin管理员组

文章数量:1414628

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

See the fiddle: /

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

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

See the fiddle: http://jsfiddle/BFTan/1/

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

• javascript
• css
• css-selectors
• safari

Share Improve this question Follow edited Mar 8, 2013 at 19:22 BoltClock 725k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Mar 8, 2013 at 19:01 ttringasttringas 2311 silver badge55 bronze badges 6

• Sorry the "question" is, is this a bug? – ttringas Commented Mar 8, 2013 at 19:02
• On line 2 of your jQuery, you have some redundant code. .appendTo($('ul')); can be better written as .appendTo('ul'); I don't think that will solve it, but it will help load time. Also, did you try adding a DOM ready function? See here jsfiddle/BFTan/2 – Cody Guldner Commented Mar 8, 2013 at 19:12
• Then if you want to see something really weird. Click 'Inspect element' inside the Results iframe on JSFiddle. Just opening the console is enough to jolt the browser into redrawing the CSS rules, which then applies the :first-child {display:block} appropriately to the new first child. – ttringas Commented Mar 8, 2013 at 19:36
• @CodyGuldner try your fiddle in Safari. Same results. – ttringas Commented Mar 8, 2013 at 19:37
• My suggestions can't hurt ;) – Cody Guldner Commented Mar 8, 2013 at 19:53

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

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.

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 bees the first child should match :first-child accordingly.

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).

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

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).

本文标签： javascriptSafari bug firstchild doesn39t update displayblock when items are removed with JSStack Overflow