Basic JS Animation Does't Work Correctly In Safari

Basic JS Animation Does't Work Correctly In Safari

So here is my animation function:
function animation(el, isHorizontal, from, to, callback) {
var start = true === isHorizontal ? from.x : from.y,
stop = true === isHorizontal ? to.x : to.y,
intervalId, diff;
intervalId = setInterval(function () {
diff = Math.abs(stop - start);
if (stop < start) {
if (diff < 4) {
start -= diff;
} else {
start -= 4;
}
} else {
if (diff < 4) {
start += diff;
} else {
start += 4;
}
}
if (true === isHorizontal) {
el.style.left = start + 'px';
} else {
el.style.top = start + 'px';
}
if (start === stop) {
clearInterval(intervalId);
callback();
}
}, 1);
}
It works perfectly in Chrome, although in Safari, the animated elements
seem to stop few pixels before they are supposed to.
Let's say I am going to move from left: 8 to left: 116. In Safari, the
element ends at around left: 108, when I open the Inspector to see the
console and check that the left offset is correct on the element, the
element repositions itself correctly.
All I need to do is open the developer console and the element jumps to
correct position.
So strange.
Here's some of my CSS that might be relevant:
.box {
position: relative;
}
.item {
position: absolute;
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-transform: transform;
}