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

Question

pkring @pkring

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

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

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

Система IOS 11.3.1

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

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

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

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 12 часов назад
- 68 просмотров
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 13 часов назад
- 54 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 14 часов назад
- 74 просмотра
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 15 часов назад
- 49 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 16 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 18 часов назад
- 103 просмотра
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 18 часов назад
- 53 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 19 часов назад
- 75 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 20 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 45 просмотров
1

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

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Взлом автомобильной программы

19 апр. 2024, в 05:01

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

Доработать телеграм бота

19 апр. 2024, в 03:52

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

Написать код на python

19 апр. 2024, в 03:01

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

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

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

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

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

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

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

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