Контейнер отключается при прокрутке на мобильный

Question

У меня есть страница опроса, где тело имеет background-color: #A71930, и контейнер с background-color: white, который содержит <form>, вот так на рабочем столе:

Я добавил эти @media запросы для мобильных устройств:

@media all and (max-width: 600px) {
  #survey-container {
    width: 100%;
    }
  }
  @media all and (max-height: 600px) {
  #survey-container {
    height: 100%;
    }
  }

Эти запросы делают страницу похожей на экран телефона:

Пока это хорошо, но моя проблема в том, что когда вы прокручиваете до конца, а затем начинаете подниматься вверх, это происходит здесь:

Как вы можете видеть, при прокрутке вверх часть контейнера обрезается внизу, оставляя содержимое <form>.Вы можете увидеть здесь .Итак, что является причиной этой проблемы, и как это можно исправить?Мой полный код можно посмотреть ниже (проблема, кажется, не возникает в codepen, поэтому попробуйте только проблему в мобильном браузере): https://codepen.io/jerryd2304/pen/qvERZL

Answer 1

Мне удалось воспроизвести это в Mac / Safari (12.0.3), но не в Chrome или Firefox.

Исправление 1:

Удалите height: 100% в целом.

Исправление 2:

Измените height на min-height:

@media all and (max-height: 600px) {
  #survey-container {
    min-height: 100%;
  }
}

В любом случае проблема решена: