Загрузочная таблица Bootstrap не прокручивается горизонтально на устройствах iOS

У меня есть таблица со следующей разметкой:

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

Как говорится в документации, моя таблица теперь должна иметь возможность прокручивать по горизонтали. Он работает, если я использую эмулятор хром-устройств. Однако, когда я пытаюсь использовать настоящий iPhone (iPhone 5 в этом случае - проверен на iPhone 6 как-то), то я не могу прокручивать таблицу по горизонтали вообще. Я вижу последний столбец, отображаемый в окне просмотра по умолчанию, и я просто не могу прокручивать его по бокам. Я пробовал это в Chrome и Safari на моем iPhone и получил такое же поведение.

Я попытался добавить -webkit-overflow-scroll: touch, но это не решило проблему. Я также попытался вручную добавить overflow-x: scroll вместо стандартного auto, но безрезультатно.

Я не уверен, что это важно, но у меня также есть плагин bootstrap - offcanvas - jasny bootstrap, и я не могу прокрутить эту сторону меню по вертикали на моем iPhone как-хорошо. Все это работает в эмуляторах, но не работает на самом деле.

Возможно, эти два связаны каким-то образом.

Любая помощь приветствуется.

Изменить:

Я только что проверил это на телефоне Android, и похоже, что я могу прокручивать таблицу горизонтально, как ожидалось. Тем не менее, я по-прежнему не могу прокручивать боковое меню вертикально даже на Android. Думаю, это означает, что эти проблемы не связаны друг с другом.

Ответ 1

Я выяснил, что по умолчанию элемент .table имеет max-width: 100% и сафари "уважает" это, поэтому он устанавливает ширину 100%, что означает, что элемент .table не переполняет элемент .table-responsive следовательно, это не проскальзывает. Это как-то не влияет на телефоны Android.

Исправление было довольно простым:

.table-responsive .table {
    max-width: none;
}

Ответ 2

.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}