How to fix horizontal scroll on iOS (Mobile)

Question

I have a weird issue that bugs me. I've setup a project with html/css that enables horizontal scrolling. This works fine for PC/Android but doesn't work on iOS unless I drag at the edge of the screen (which takes me to the previous or next page visited) and drag back again. When doing this I'm allowed to scroll perfectly until the scroll stops. If I want to scroll again I have to repeat the drag gesture. It's like the scrolling area won't get focus or something. Snippets of the attempt (HTML):

<div class="scrollable">
    <div class="scrollable-content">
        <div id="tournaments-horizontal">
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
        </div>
    </div>
</div>

CSS: http://pastebin.com/aUsQQUjm

I would really appreciate if someone knew something about this. Again, to repeat the "solution" for iOS:

1. Load the page
2. Try to scroll in the scrolling area (nothing happens)
3. Drag at either edge of the screen in Safari (you will see the previous/next page the browser has queued) but don't drag all the way. Just get a glimpse of that page and then drag back to the current page
4. Now you can scroll as expected (until the scrollbar disappears).
5. Repeat step 3-4

(Screwed up the code tag so I decided to link to a pastebin instead).

Thanks in advance!

Answer 1

Add this to your CSS:

.scrolling-element {
    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
    -webkit-overflow-scrolling: touch;
}