Bootstrap responsive table not scrolling vertically on iOS devices

Question

This is what I have:

<div class="table-responsive">
    <table class="table" style="background: transparent">
        ....
    </table>
</div>

I am using the following bootstrap.css file: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css

When I try to scroll up and down on an iOS device (while my finger is touching the table), it doesn't scroll. It just drags the whole page up and down. I have to touch the body background or any other object, other than the table, in order to scroll. This problem doesn't come up in Android devices, but it seems to be there on iOS devices, like iPhone.

I tried adding overflow-y: auto to <div class="table-responsive">, but it still didn't work.

What do I need to add in order to enable scrolling on mobile devices (Apple devices, specifically)?

Solution 1

For anyone else having this problem, all I had to do to solve it was to add the following line to the css of the table-responsive class:

-webkit-overflow-scrolling: touch;

And now it works as expected.

Solution 2

I had the same problem then I removed overflow: hidden; from html and body. The behavior of Safari on IOS matched the behavior of Chrome on Android, ie, the page was scrolling vertically again. Check and see if a parent of .table-responsive has overflow-hidden and try commenting it out.

I'm still looking for a better solution that will not force me to alter the CSS of parent elements.

[EDIT]

Found it. You don't need to change the overflow value on the parent of .table-responsive, just make sure you add

parent {
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}