title: jQuery content scroller fails to show list items after first one
body: <p>So I have a news scroller which rotates through an array of news items, fading them in and out. For some reason, on mobile devices, it malfunctions after the first item is displayed, hiding all other items. Chrome DevTools tells me that they fail to show because their <code>display</code> is set to <code>none</code>. My question is, why would this be working on desktops, but malfunctioning on mobile devices (namely iPhone 6/7/8)? Here is the code used to show the items:</p>
  
  <pre><code>newsArr = ['Item 1','Item 2','Item 3','Item 4'];
  
  $.each(newsArr, function(i) {
    $('ul#newsScroller').append('&lt;li class="news-item"&gt;' + newsArr[i] + '&lt;/li&gt;');
    $('#allNewsDiv').append('&lt;div class="all-news-item"&gt;&lt;img src="https://dl.dropbox.com/s/r8nu1zb2gpzd92k/Ball%20Icon.png" alt="" style="float:left; margin-right:10px; position: relative; top: 2px;" width="20" height="20"&gt;&lt;div class="all-news-item-text"&gt;' + newsArr[i] + '&lt;/div&gt;&lt;/div&gt;');
  });
  
  // Determine the height of the li element and set the scroller to that height
  var maxScrollerHeight = Math.max.apply(null, $('ul#newsScroller li').map(function() {
    return $(this).outerHeight(true);
  }).get());
  $('#newsScroller').css({
    'height': (maxScrollerHeight) + 'px',
    'opacity': '1'
  });
  
  // Hide li elements initially
  $('ul#newsScroller li').css({
    'display': 'none'
  });
  
  (function() {
  
    var newsItems = $(".news-item");
    var newsItemsIndex = -1;
  
    function showNextNewsItems() {
      ++newsItemsIndex;
      newsItems.eq(newsItemsIndex % newsItems.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextNewsItems);
    }
  
    showNextNewsItems();
  
  })();
  </code></pre>
  
  <p><a href="https://jsfiddle.net/shaneswebdevelopment/k2ptfhqz/" rel="nofollow noreferrer">https://jsfiddle.net/shaneswebdevelopment/k2ptfhqz/</a></p>