положение: фиксированное игнорируется на iphone, когда клавиатура открывается

Question

* У меня похожая проблема, как у этого парня: https://css -tricks.com / forums / topic / ios-scroll-with-fixed-position-div-when-клавиатура-появляется /

---

Я делаю простой модальный способ, который мне нужно исправить на всей странице.Внутри модального списка есть списки <input> и <ul>.

* список можно прокручивать внутри модального окна, и он должен оставаться на месте.

Таким образом, модальный режим стабилен, пока я не коснусь<input> и клавиатура появляется.После этого вся страница прокручивается вверх и вниз.

Ниже я показываю свой код.

const Index = () => ( <
  div className = "c-ftsOnTop" >
  <
  h1 > MOBILE SCROLLING OVERLAY < /h1> <
  div className = "c-fts" >
  <
  form action = "" >
  <
  input type = "text"
  id = "fts-pickupLocation"
  name = "fts-pickupLocation"
  aria - describedby = "fts-pickupLocation-screenReaderInstructions"
  aria - controls = "fts-pickupLocationResultsContainer"
  aria - autocomplete = "list"
  aria - required = "true"
  autocomplete = "off"
  placeholder = "city, airport, station, region, district…"
  value = ""
  autofocus = ""
  required = "" / >
  <
  /form> <
  div className = "c-fts-results" >

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol> <
  /div> <
  /div> <
  /div>
)

export default Index

.c-ftsOnTop {
  background: lightblue;
  display: block !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.c-fts {
  background-color: lightcyan;
}

.c-fts-results {
  background: pink;
  height: 450px;
  overflow-y: auto;
  position: relative !important;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

визуальный результат выглядит так (это в настольном браузере):