How to fix finger scroll size increase in scroll div in iPad

Question

The thumb size of the scrollbar increases as I scroll through the words 'overflow-y: scroll' on the iPad. Any idea how to fix this design gap?

position: absolute;
max-height: 200px; 
overflow-y: scroll; 
overflow-x: hidden; 

The above basic set of styles for an element.

This is how it looks on the iPad as it scrolls almost to the bottom of the div.

This is the expected behavior:

Answer 1

Try using custom scrolling with: -webkit-overflow-scrolling: touch;

Safari Developer Library Help

I tried to reproduce this behavior using the ipad simulator http://codepen.io/anon/pen/kApKB

The problem may also be variable height.