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

Question

pkring @pkring

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

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

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

Система IOS 11.3.1

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

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 сделать

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

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

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

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

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

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

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

JavaScript

Простой
Как конвертировать массив полей FORM/формы в массив полей объекта JS?
- 1 подписчик
- 21 час назад
- 93 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как устранить задержку js-скрипта в Slabify?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

Средний
Как сделать сложное условие с циклами?
- 1 подписчик
- вчера
- 170 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как анализировать JS и PHP ошибки на своем сайте?
- 1 подписчик
- 16 янв.
- 178 просмотров
3

ответа
JavaScript

+1 ещё

Простой
Как улучшить код и что в нём может быть не так?
- 1 подписчик
- 15 янв.
- 1610 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Почему addItem передает пустое значение?
- 2 подписчика
- 15 янв.
- 359 просмотров
0

ответов
JavaScript

Средний
Почему сброс значений фильтрации и сортировки ломает всю логику у плагина DataTable?
- 2 подписчика
- 15 янв.
- 66 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как изменить ширину карусели owl-carousel Битрикс?
- 1 подписчик
- 15 янв.
- 50 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Подсчет нажатия кнопки и сохранение параметра в свойство элемента Битрикс?
- 1 подписчик
- 15 янв.
- 47 просмотров
0

ответов
JavaScript

Средний
Как использовать proxy в tampermonkey?
- 1 подписчик
- 15 янв.
- 44 просмотра
0

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

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Fullstack-разработчик React.js/JavaScript/Node.js/PHP Laravel

Digitable • Иваново

от 110 000 до 150 000 ₽

Лендинг

18 янв. 2025, в 07:20

50000 руб./за проект

C++, добавление логики в шахматы на SFML

18 янв. 2025, в 03:12

1000 руб./за проект

Настроить ssl сертификат для сайта

18 янв. 2025, в 00:01

500 руб./за проект

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

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

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

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

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

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

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