Safari Broken scrolling

Question

So I have this site here http://x.red-rhino.com/calhoun and I'm experiencing choppy/broken scrolling on my safari browser.. I have tested this on OS X 10.10.4 safari newest update, iPhone 6 safari (both newest updates), air book & macbook pro, as well as a iPhone 4 and 5s.. It also seems to be more of an issue on IOS rather than OS X or WINDOWS

When you scroll and let go it instantly stops scrolling, making it really hard to get to the bottom. Normally on a website when you scroll if slides a little (I forget the term for this) but on my website it's not doing that. I disabled a bunch of plugins incase they were the issue but it doesn't seem to fix it..

I was wondering if someone would be able to help me out a ton, I tried googling and spent a lot of time researching into this but I can't figure it out since it seems to be an issue only my site and not others I test on.

Thanks a ton :)

Answer 1

General solution for this is to add this rule:

html, body {
    -webkit-overflow-scrolling: touch;
}

It can also be used only on selected elements (wide tables overflowing screen mostly). It is called momentum scrolling (if you want to google it). Here's more forom MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 2

So I seemed to have found a temp solution.. Not too sure if this is the proper way or not but it seems to work for now...

html, body {
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}