2

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.net/BFTan/1/

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
ttringas
  • 23
  • 1
  • 5
  • Sorry the "question" is, is this a bug? – ttringas Mar 08 '13 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 http://jsfiddle.net/BFTan/2/ – Cody Guldner Mar 08 '13 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 Mar 08 '13 at 19:36
  • @CodyGuldner try your fiddle in Safari. Same results. – ttringas Mar 08 '13 at 19:37
  • My suggestions can't hurt ;) – Cody Guldner Mar 08 '13 at 19:53
  • Interestingly, the bug is still present in Safari 9.02. Fortunately, the fix from the accepted answer still works too. – Michal Jan 19 '16 at 09:23

1 Answers1

5

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356