Resizing div element from the left causes the right to shift by a few px

I'm creating a box element that is resizable on all edges and corners. It seems to be working fine, except for one small thing. When I resize from the top or the left edge, the right (left edge resize) or bottom (top edge resize) will increase by a few px on each mousedown event.

I suspect that it has something to do with the width changing before the left has a chance to change, but even with a condition on the width adjustment, I get the same result.

if(onLeftEdge) {
   console.log('box right: ' + b.right);
   box.style.left = event.clientX + 'px';
   box.style.width = (initialClientX - event.clientX + b.width) + 'px';
}
if(onTopEdge) {
   box.style.top = event.clientY + 'px';
   box.style.height = (initialClientY - event.clientY + b.height) + 'px';
}

As you resize on the left, the console will show the right jumping by 1-3px.

Why doesn't the right side of the box stay put. Why does it re-adjust on mousedown?

https://codepen.io/elephantjay/pen/yrRPLM?editors=1111

from Resizing div element from the left causes the right to shift by a few px