JSFiddle - React, Tailwind, and code Playground

HTML

Completed <span id="completedCount">0</span> times
<div id="clickme">
    Click here to see issue
</div>
<div id="clickme2">
    Click here to see wrapper fix issue
</div>
<div id="box">
    <div id="holder">
        <div id="green"></div><div id="blue"></div>
    </div>
</div>
^ You should see the blue stop just short on the left side showing a little green and then jump to the edge.
<br />
<br />
Press the first button several times to see it randomly get close to the edge. (usually off by 1px to 20px)
<br />
<br />
If you do not see the problem make sure to set the logCalls to high enough for your browser.
<br />
If logCalls is too high your browser will crash.
<br />
<br />
Pressing the second button will use a setTimeout to wrap the slow function and fix the issue.

CSS

#box {
    width: 400px;
    height: 220px;
    background: #000;
    position: relative;
    border: 4px solid #F00;
    overflow: hidden;
}
#green, #blue {
    background: #0F0;
    width: 400px;
    height: 220px;
    display: inline-block;
}
#blue {
    background: #00F;
}
#holder {
    position: absolute;
    left: 0;
    width: 800px;
}

JavaScript

var logCalls = 10000; //I use 20000 for Chrome, 60000 for Safari, and 10000 for Firefox
var timesCompleted = 0;
$('#clickme').click(function() {
   startAnimation(false);
});
$('#clickme2').click(function() {
   startAnimation(true);
});
function startAnimation(useWrapper) {
    $('#holder').css('left', 0);
    $('#holder').animate({left: "-400px"}, 'fast', function() {
        if(useWrapper) {
           wrapSlowFunctionWithSetTimeout();
        } else {
           intentionalSlowFunction();
        }
    });
}
function wrapSlowFunctionWithSetTimeout () {
    window.setTimeout(function () {
        intentionalSlowFunction();
    }, 100);
}
function intentionalSlowFunction () {          
    $("#completedCount").text(++timesCompleted);
    for(var i = 0; i < logCalls; i++) {
        console.log($('div'));
    }
}