Javascript quotes reel not working on mobile (Chrome, Safari…)

Question

I have a few rolling quotes which are changing every 2 seconds.. The script works on my desktop (Chrome) and also on some mobile browsers (Firefox,..), but I am getting complaints that it doesn't work on iphone or mobile chrome..

The problem on the mobile is actually that the first quote is being displayed and after that it disappears, but the new one is not loaded.. Everything is just blank.. I have also tried to remove if statement and so on..

The problem is in showing up the 2nd quote or better said increasing the opacity to 1..

https://jsfiddle.net/8pht19r5/

Here is the JS excerpt:

function initQuoteCarousel() {

  var $quotesWrapper = $(".cust-quotes");
  var $quotes = $quotesWrapper.find("blockquote");

  if (!$quotes.length) {
    return;
  }

  var selectNextQuote = function() {
    // keep move first quote in dom to the end to make continous
    var $quote =  $quotesWrapper.find("blockquote:first").detach().appendTo($quotesWrapper);

    setTimeout(selectNextQuote, $quote.data("timeout"));

  };

  setTimeout(selectNextQuote, $quotes.filter(":first").data("timeout"));

}

$(function() {
  initQuoteCarousel();
});

Answer 1

Added one blank quote. Otherwise initially first two were displayed simultaneously. And made this one change to css.

        <div onclick="window.location.href = 'main.php'" class="cust-quotes">
    <blockquote data-timeout="1000"><p>one.</p><cite>USA today</cite></blockquote>
     <blockquote data-timeout="2000"></blockquote>
    <blockquote data-timeout="2000"><p>two.</p><cite>USA today</cite></blockquote>
    <blockquote data-timeout="2000"><p>three.</p><cite>USA today</cite></blockquote>
    <blockquote data-timeout="2000"><p>four.</p><cite>USA today</cite></blockquote>
    </div>

CSS:

.cust-quotes blockquote:first-child {
opacity: 1;
transform: translateY(-10px) scale(1.1);

}

Hope this helps...