Как исправить баг на IOS?

Question

pkring @pkring

Как исправить баг на IOS?

Сталкнулся с проблемой. Есть хедер (красный) и футер (зеленый), оба имеют position: fixed. Центральный блок имеет скролл.
В приложении "telegram" открываю эту страницу в вебвью и футер обрезается. Если проскроллить средний блок до конца, то футер можно поднять, но при этом хедер исчезает в верху на такое же растояние

Если открыть в браузере, то все ок.

Система IOS 11.3.1

Вопрос задан более трёх лет назад
105 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

CatCotCod @CatCotCod

Загрузи код в веб редактор какой-нибудь, пожалуйста. так будет более понятно

Написано более трёх лет назад

pkring @pkring Автор вопроса

Код элементарный (в самом приложении конечно сложнее, но суть та же)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    header {
      width: 100%;
      height: 3rem;
      position: fixed;
      top: 0;
      left: 0;
      background: rgb(255, 203, 203);
    }

    main {
      margin: 3rem 0;
    }

    footer {
      width: 100%;
      height: 3rem;
      position: fixed;
      bottom: 0;
      left: 0;
      background: rgb(180, 255, 186);
    }
  </style>
  <body>
    <section>
      <header>asdasd</header>
      <main>
        <p>
          eeeee Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea
          omnis cumque maiores odit pariatur velit maxime saepe labore
          voluptatibus consectetur, illo amet dicta cupiditate, nihil minima qui
          in voluptas soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea omnis
          cumque maiores odit pariatur velit maxime saepe labore voluptatibus
          consectetur, illo amet dicta cupiditate, nihil minima qui in voluptas
          soluta? eeeee
        </p>
      </main>
      <footer>asdasd</footer>
    </section>
  </body>
</html>

Написано более трёх лет назад

Argentinium @Argentinium

Я бы попробовал в vh указать высоту хедера и футера.

Написано более трёх лет назад
Kovalsky @lazalu68

Попробуйте полноценный reset сделать

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 4 часа назад
- 44 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Стоит ли переносить логику работающего онлайн-калькулятора с JS на PHP ради защиты формул от копирования?
- 3 подписчика
- 18 мая
- 1149 просмотров
7

ответов
JavaScript

Простой
Почему вместо галереи owl-gallery белое пространство?
- 1 подписчик
- 18 мая
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Почему окно fancybox по ajax открывается и сразу закрывается?
- 1 подписчик
- 15 мая
- 81 просмотр
2

ответа
CSS

Простой
Как добиться одинаковой ширины для определеных блоков в гриде?
- 1 подписчик
- 15 мая
- 101 просмотр
1

ответ
JavaScript

Простой
Как упростить/ улучшить получение данных?
- 1 подписчик
- 14 мая
- 136 просмотров
2

ответа
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 231 просмотр
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 126 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 342 просмотра
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- 01 мая
- 178 просмотров
4

ответа
Показать ещё Загружается…

Загрузи код в веб редактор какой-нибудь, пожалуйста. так будет более понятно
Я бы попробовал в vh указать высоту хедера и футера.
Попробуйте полноценный reset сделать

Answer 1 · 2020-08-27 12:13:21

Этот скролл появляется даже на полностью пустой странице. Похоже проблема в версии IOS начиная с 11. В 11.4.1 все нормально работает.
Еще помогла эта ссылка ссылка

Как исправить баг на IOS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт