JSFiddle - React, Tailwind, and code Playground

HTML

<p>Testing jQuery 1.4.3 and 1.4.4 bug related to animating a layer with left position larger than -10000px</p>
<div id="container">
    <div class="btn" id="left"><a href="javascritp:void(0)">&lt;</a></div>
    <div class="btn" id="right"><a href="javascritp:void(0)">&gt;</a></div>
    <div id="window"><ul id="scroll"></ul></div>
</div>
<p>Go beyond 100 to see the erratic move.</p>

CSS

#container {position:relative;height:100px;font-family:Arial, Helvetica, sans-serif;}
#container .btn {position:absolute;width:100px;bottom:0;font-size:64px;text-decoration:none;}
#container #left {left:0;}
#container #right {right:0;}
#container .btn a {display:block;line-height:100px;text-align:center;text-decoration:none;}
#window {position:absolute;left:100px;right:100px;top:0;bottom:0;overflow:hidden;border:1px solid #ccc;}
#window ul {position:absolute;left:-9000px;top:0;width:20000px;list-style:none;margin:0;padding:0;}
#window ul li {float:left;display:inline;width:94px;height:92px;line-height:92px;margin:3px;padding:0;text-align:center;font-size:32px;color:#999;background-color:#eee;}
p {text-align:center;margin:1em 100px;color:#999;font-size:14px;font-family:Arial, Helvetica, sans-serif;}

JavaScript

for (var i = 0; i < 200; i++) {
  $('#scroll').append('<li>' + i + '</li>');
}
$('#left>a').click(function() {
    var ww = $('#window').width();
    var cleft = $('#scroll').position().left;
    $('#scroll').stop(true, false).animate({
        left: Math.min(cleft + ww, 0)
    }, 2000);
});
$('#right>a').click(function() {
    var ww = $('#window').width();
    var cleft = $('#scroll').position().left;
    $('#scroll').stop(true, false).animate({
        left: Math.max(cleft - ww, -20000 + ww)
    }, 2000);
});