Absolute positioned elements not fixed in scrollable list

Question

I have a long horizontal list like

<ol>
    <li>A</li>
    ...
</ol>

The ol has overflow-x: scroll and the lis have display: inline

DEMO

Also, the first and last element have position: absolute and are sticky at the begin/end of the list and are always visible.

Now, when you open this in mobile safari/chrome (I have a iPhone 6 with iOS9) you'll see that the scrolling does work but without momentum. So I added

-webkit-overflow-scrolling: touch;

DEMO

to the ol css. Now you can scroll with momentum, but the sticky elements are not sticky any anymore. This doesn't make any sense to me, any suggestions how to fix this ?

UPDATE: Found a useful link here.