Исправлено положение свитков нижнего колонтитула в iPhone X

Question

У меня есть гибридное приложение HTML5, созданное с использованием инфраструктуры Trigger.io.

Приложение содержит фиксированный нижний колонтитул и область прокрутки контента. Приложение прекрасно работает на всех устройствах, кроме iPhone X. На iPhone X, когда я прокручиваю область содержимого, нижний колонтитул фактически прокручивается из поля зрения.

Так выглядит приложение, когда отображается нижний колонтитул

Но как только я прокручиваю вниз, нижний колонтитул скрывается и отображается только при повторной прокрутке вверх.

Я применил оптимизацию iPhone X для надреза, и это отлично работает в дизайне. Единственная проблема, которая остается, это проблема прокрутки.

Поскольку я использую гибридную среду, представление построено с использованием HTML + CSS, а не собственных компонентов пользовательского интерфейса.

Есть мысли о том, почему нижний колонтитул прокручивается на iPhone X?

Answer 1

Не используйте fixed позицию в CSS. Попробуйте функцию translateZ() CSS, которая перемещает элемент вдоль оси z в трехмерном пространстве, то есть ближе или дальше от зрителя. Его результатом является <transform-function> тип данных.

Вот HTML-код:

<div>Static</div>
<div class="moved">Moved</div>

Вот код CSS:

div {
  position: relative;
  width: 100px;
  height: 1000px;
  left: 200px;
  background-color: black;
}
.moved {
  transform: perspective(400px) translateZ(180px);
  background-color: red;
}

Answer 2

 <div class="main_div">
    <div class="scrollble">
    // scrollable content
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    </div>
    <div class="footer">
    // fixed footer
    </div>
</div>

// CSS

.main_div {
 height: 100vh;
 position: fixed;
 }
.scrollble {
 height: 95vh;
 overflow-y:auto; 
 border: 1px solid #000;
}
.footer {
 height: 5vh; 
position: fixed; 
width: 100%; 
}

Answer 3

Вы можете попробовать поместить div вне прокручиваемой части, и положение будет зафиксировано. Так что, если у вас есть код для прокрутки,

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

Такой, когда любой элемент в контейнере прокрутки div, он будет прокручиваться.

Если вы разместите его вне прокручиваемой части,

<div id="scroll-container">
<div>
<div id="not-scrollable">
</div>

и вставьте position:fixed; или position:absolute; или position: sticky; (Brainfeeder) (хотя я еще не пробовал) или device-fixed; (веб-звезды) (также не пробовал) в CSS для #not-scrollable, это не должно прокручиваться. Попробуйте.

Конечно, это не будет относиться к контейнеру прокрутки, оно будет относиться к тому контейнеру, в котором он находится, и в данном случае это тег body.

Примечание: я просто использую div в качестве примера. Вы можете использовать это как хотите

Новое: В случае, если тело - это ваш свиток, добавьте div внутри тега body, но сразу после объявления тега body, чтобы свиток был div.

Существует множество сайтов, показывающих, как перенести веб-страницу на iPhone X. Вот один из них.

Answer 4

Я использовал position:sticky; в предыдущих веб-проектах. Оказывается, это работает в большинстве случаев. Можете ли вы использовать позицию слип?

Еще одна попытка (я должен был сделать это для FireFox и iOS Safari, чтобы исправить некоторые ошибки) - это обернуть весь контент в <div>, включая фиксированные элементы (header / footer, ...). они были исправлены / привязаны по отношению к своему родителю, после того как родитель закончил, исправился и / или сломался, что привело к различным ошибкам.

Если это простое исправление не работает, я хотел бы получить ответ от @ RandomChannel.

Answer 5

Предложение идеи для исправления с помощью JQuery

CSS

body
  margin: 0

#WhatEverClassOrIdYouGaveIt
  height: 10em // or whatever size u want
  width: 100%
  //background-color: red
  position: absolute // or fixed

JQuery

resize = () => {
  var o = $(document)
  dW = o.width() //Not needed
  dH = o.height()
  $("#WhatEverClassOrIdYouGaveIt").css({
    top: dH - $("#WhatEverClassOrIdYouGaveIt").height()
  })
}

$(window).resize(() => {
  resize()
})

resize()