ошибка прокрутки iPhone при прокрутке текстового поля

Я веб-страницы со следующим html:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div style='display:flex;flex-direction:column;height:100%;'>
        <div style='overflow:auto'>
            <div style='height:500px; background:green;'></div>
            <div class='container'>
                <div class='row'>
                    <div class='col-sm-6'>
                        <input type='text' style='' class='form-control' placeholder='swipe here' />
                    </div>
                </div>
            </div>
            <div style='height:500px; background:blue;'></div>
        </div>
    </div>
</body>
</html>

загрузите его на iPhone. Попробуйте прокручивать вверх и вниз, проводя пальцем. Теперь попробуйте прокрутить, начав салфетки в текстовом поле, которое говорит "салфетки здесь". Со мной он не будет прокручиваться, когда я это сделаю. Я использую iPhone 6S.

это ошибка? Как я могу обойти это?

6
css html ios safari

2 ответов

проблема появляется на iPhone 6s и выше.

Кажется, это вызвано <div style='overflow:auto'>. Когда overflow удаляется, страница прокручивается при прокрутке текстового поля.

протестировано в safari на iPhone 6s, 6s+, 7, 8 и X. надеюсь, это поможет.

1

С точки зрения пользователя, это ошибка.

при использовании bootstrap вам нужно заключить класс строки в класс контейнера, как показано ниже. Страница получает свойства для прокрутки влево и вправо из-за этого CSS из bootstrap:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

пример ниже с div.контейнер помогает ограничить ширину приложения.

<div style='display:flex;flex-direction:column;height:100%;'>
  <div style='overflow:auto'>
    <div style='height:500px; background:green;'></div>

    <!--This container is missing to get bootstrap row to work well-->

    <div class="container">
      <div class='row'>
        <div class='col-sm-6'>
          <input type='text' style='' class='form-control' placeholder='swipe here' />
        </div>
      </div>
    </div>
    <div style='height:500px; background:blue;'></div>
  </div>
</div>
1