I can't debug this code... because debugging makes it work?

My codepen

Hi all! This is such a weird issue that I created an account to hopefully get an answer from someone. Without going into too much detail, there is a variable wrapper which is assigned an element with ID #wrapper. To make my carousel slider infinitely draggable, it can remove the last element of wrapper and place it at the front, or it can remove the first element and place it at the end. As this happens, the container element wrapper is moved the the left or right, to make it appear that nothing has changed.

The issue is that one of the functions which does this shuffle_up() is supposed to change the left offset on line 148 of the JS. It does, but only when you insert one of the following lines directly below it:

console.log(wrapper.offsetLeft); or
debugger; or
wrapper.offsetLeft;

You will see if you delete or comment out line 149, that if you drag the slider a very small amount to the right and release the mouse, the offsetLeft property is all wrong. However if you try and debug it in any way, or simply call wrapper.offsetLeft, it behaves as expected.

Why? Why do I need to invoke a property of an object for that property to be updated? I have tried in Chrome, Firefox and Edge so this can’t be a browser issue. I would really, really appreciate it if anyone could help me understand what on earth is happening here.