Как исправить баг на 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

+2 ещё

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

ответов
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 8 часов назад
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как настроить CORS .NET 8?
- 1 подписчик
- 10 часов назад
- 43 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- вчера
- 128 просмотров
0

ответов
CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 142 просмотра
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 219 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 104 просмотра
1

ответ
JavaScript

Простой
Как исправить ошибку «Uncaught ReferenceError: $ is not defined» хотя jQuery подключен?
- 1 подписчик
- 16 дек.
- 83 просмотра
2

ответа
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- 16 дек.
- 81 просмотр
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

div. • Ставрополь

от 40 000 до 90 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Конвертировать файл в формате mkv в mp4

18 дек. 2024, в 20:01

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

Веб сервис для печатной мастерской (php+laravel+mysql)

18 дек. 2024, в 19:48

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

Отладить код на JavaScript

18 дек. 2024, в 18:35

500 руб./в час

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

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

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

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

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

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

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