Как получить плавную анимацию при манипулировании DOM с помощью rAF

Question

Нужна непрерывная карусель для клиента, который работает с объектами разных размеров в списке (в основном непрерывная лента тикеров для логотипов клиентов). В настоящее время я использую requestAnimationFrame постоянно скользить карусель.

Вот CodePen.

В Firefox я получаю прерывистость анимации, когда первый элемент в списке перемещается в конец. Есть ли более эффективный способ сделать это?

HTML:

<div id="clients_carousel" class="col-md-12 hidden-xs hidden-sm">
  <ul id="scroller" class="clearfix">
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/01/keesler.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/wcd.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/viva.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/magma.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/07/safe.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/2ndimage.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/balboa1.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/smile.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/nfib.png" alt=""></li>
    <li><img class="img-responsive" src="http://www.cloudaccess.com/wp-content/uploads/2015/02/dental1-e1424199396391.png" alt=""></li>
  </ul>
</div>

JS: (минус сша)

function animate(){
  requestAnimationFrame(animate);
  animateNow();
}

requestAnimationFrame(animate);

function animateNow(){
    var fWidth = parseInt($('#clients_carousel ul li:first').outerWidth(true), 10);
    var lIndent = parseInt($('#clients_carousel ul').css("left"), 10);
    if (fWidth < Math.abs(lIndent)) {
      $('#clients_carousel ul li:last').after($('#clients_carousel ul li:first'));
      var newIndent = lIndent + fWidth;
      $('#clients_carousel ul').css('left', newIndent + 'px');
      lIndent = newIndent;
    }
    $('#clients_carousel ul').css("left", lIndent - 1);
  }