На этой странице на plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) возникает странная проблема.
В Chrome на Windows и Android (Canary также) все работает хорошо. Я могу прокручивать две области (слева и справа), а верхний и нижний div страницы находятся вверху и внизу экрана моего устройства. Я вижу их в любое время (см. Рисунок ниже).
На iPad или iPhone, iOS, с Safari или Chrome, это не то, что я получаю. А также на Firefox 47.0.1 на Windows.
Страница длинная, и справа есть только один прокрутка, например, если на странице нет flexbox, этот код просто игнорируется:
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Пример Quirk:
Вы можете видеть на iPad или iPhone просто нажатием на эту кнопку:
Почему это поведение? Ошибка Safari и Firefox или Chrome? Почему в Chrome все хорошо работает на Windows и Android? И если в новом Safari в будущем это будет работать хорошо, как это сделать с более старыми устройствами со старыми iOS и firefox?
Буду признателен за любой ответ. Спасибо.