How To Properly Scroll On Safari Mobile (iPad)?

I need to handle both horizontal and vertical scrolling in a simple way, that works on Safari mobile in general and iPad in peculiar. I have a very simple HTML/CSS framework which

Solution 1:

You had a bit TOO much css happening in there. I updated your fiddle with the properties I moved/removed.

I removed .hScrollable and .scrollerContainer from the css and added the overflow properties right to .scroller.

So .scroller now looks like this:

.scroller {
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 4px;
    width: 100%;
    background-color: lightgray;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space:nowrap;
}

Here's the fiddle.