На Safari Mobile 10.3 липкий нижний колонтитул можно прокручивать с экрана

Наше мобильное веб-приложение имеет липкую навигационную навигацию, подобную той, которую вы часто находите в приложениях iOS, и после того, как Safari 10.3 выпустит только для пейзажа, можно прокручивать липкую навигацию (нижний колонтитул) с экрана. Даже если это position: fixed и установить bottom: 0, это также было невозможно в более старых версиях Safari.

Стили для липкой навигации/нижнего колонтитула:

footer {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.7);
}

DEMO, чтобы попробовать по телефону

В портретном режиме он всегда виден:

В ландшафтном режиме вы можете прокручивать экран за размером верхней адресной строки:

Кто-нибудь сталкивался с такой проблемой? Я был бы признателен за любую помощь, чтобы сделать нижний колонтитул на экране. Благодаря

Ответы

Ответ 1

Это скорее обходное решение, чем реальное решение. Однако position: fixed была проблемой для мобильных устройств в течение многих лет, и лучший способ преодолеть эту проблему - использовать position: sticky.

sticky ведет себя как position: relative внутри своего родителя, пока заданный порог смещения встречается в окне просмотра.

_{От: Придерживайтесь приземления! позиция: липкие земли в WebKit}

Однако position: sticky пока не поддерживается полностью, поэтому я также предложил бы использовать:

position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;

_{См. статус здесь для статуса поддержки MS Edge sticky (спасибо Фриц)суб >}

html,
body {
  height: 200%;
}

body {
  background-image: linear-gradient(180deg, #ededed 0px, #ededed 9px, #000000 9px, #000000 10px);
  background-size: 100% 10px;
}

footer {
  position: sticky; /* currently in development for MS Edge */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  height: 50px;
  top: 80%;
  background: rgba(255, 0, 0, 0.7);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <footer>
  </footer>
</body>

</html>

Ответ 2

Существует другой способ создания фиксированного элемента в нижней части страницы:

Задайте элемент <body> (или любое другое содержимое вашего заголовка, содержимого и нижнего колонтитула) до display: flex; height: 100vh. Затем вы берете нижний колонтитул и устанавливаете его на margin-top: auto.

HTML:

<body>
    <header>
    </header>
    <main>
    <main>
    <footer>
    </footer>
</body>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

Другим решением с той же разметкой будет использование CSS Grid:

html {
    height: 100%;
}

body {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

Чтобы получить лучшее из обоих миров, вы можете обернуть стили CSS Grid в обертке @supports(display: grid){}. Если Grid поддерживается, браузер берет это и в противном случае откатывается на Flexbox.

Лучшая вещь, использующая этот метод, заключается в том, что вы не столкнетесь с перекрывающимся содержимым, проблемами масштабирования и полностью реагируете на get-go.

В CSS-трюках есть статья о теме: https://css-tricks.com/couple-takes-sticky-footer/

Ответ 3

Вы ничего не можете с этим поделать. Режим ландшафтного сафари делает контейнер с вашим контентом уходящим с экрана. Это невозможно обнаружить и, следовательно, не решить. Я попытался проиллюстрировать, что происходит:

Синяя панель = навигационная панель Safari

Желтая панель = Панель навигации приложения

Вместо уменьшения высоты контейнера Safari позволяет отключиться от экрана.

Ответ 4

Попробуйте это в элементе фиксированной позиции в вашем css:

transform:translate3d(0px, 0, 0);
-webkit-transform:translate3d(0px, 0, 0);