Before answering I wanted to do some further testing. The unexpected behavior was result of an old version of my code paired with Chrome Inspector but in a real scenario, the behavior is the one expected in mobile, both in Safari and Chrome.
Now, this brings me to the second case scenario:
There are two draggable instances, one for moving the parent container .sections horizontally, and another one to scroll each section vertically. When I leave out the second Draggable instance (of type "scrollTop", on each section), I can scroll vertically on the .section container but the Draggable instance on the parent container, .sections will not move horizontally.
On desktop browsers the behavior is as intended, but in mobile here it is where I have some trouble getting the X axis to move.
In Chrome on Android it doesn't move horizontally, and in Safari in iOS10, it moves horizontally one section, and then it gets stuck in that section.
I updated the Codepen commenting out the second draggable instance so that you can see what I am talking about.
Any help is greatly appreciated. Thank you both, Jack and Carl.