it-roy-ru.com

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

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

Стили для липкого nav/footer следующие:

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

ДЕМО попробовать на телефоне

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

 portrait-mode

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

 enter image description here

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

25
Andriy Horen

Это скорее обходной путь, чем реальное решение. Однако 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 статус поддержки (спасибо Frits )

 enter image description here


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>

6
Paolo Forgia

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

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

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

 Situation safari

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

6
Thomas van Broekhoven

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

Установите для элемента <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.

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

На эту тему есть статья о хитростях CSS: https://css-tricks.com/couple-takes-sticky-footer/

4
Marco Hengstenberg

То, что происходит при переключении в ландшафтный режим и при переключении в «минимальный интерфейс» safari и обратно, является событием изменения размера окна. Вы можете проверить getBoundingClientRect().bottom фиксированного элемента, чтобы убедиться, что он больше, чем window.innerHeight (это означает, что фиксированный элемент находится вне нижней части окна). Если это так, вы можете установить для свойства css bottom элемента fixed значение element.getBoundingClientRect().bottom - window.innerHeight. Это сохранит положение фиксированного элемента. Для пользователя это выглядит немного рывком, но это лучше, чем элемент, уходящий с нижней части экрана.

0
elLargeGrande

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

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

У меня была такая же проблема, и я исправил ее так, что мой тестер был доволен ... Не идеальное решение, но выполняющее свою работу.

Добавьте пустой элемент с некоторым отступом или полем.

const _userAgent = navigator.userAgent.toLowerCase();
if (_userAgent.indexOf('safari') != -1) {
    if (_userAgent.indexOf('chrome') == -1) {
        $('.myelem').append('<div class="my-5"></div>');
    }
}
0
harry