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)?

Answer 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.