Невозможно прокрутить липкий нижний колонтитул в мобильном представлении (эффект раскрытия нижнего колонтитула) — overfl ⇐ CSS

[Anonymous]

Я создал эффект раскрытия нижнего колонтитула с помощью CSS, используя следующие два класса:
Класс Content применяется к переносу div над нижним колонтитулом.

Код: Выделить всё

  .content {
min-height: 100vh;
background-color: white; /* Needed to obscure the footer behind it */
position: relative; /* Needed to make z-index work */
z-index: 1; /* Make sure the content is on top of the footer */
padding-bottom: 60px; /* Adjust according to your footer height */
}

Класс нижнего колонтитула применяется к элементу-обертке содержимого нижнего колонтитула.

Код: Выделить всё

  .footer {
background-color: black;
position: sticky;
bottom: 0;
left: 0;
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

Это работает отлично, что касается эффекта раскрытия нижнего колонтитула. Однако, поскольку у меня в нижнем колонтитуле больше контента, чем высота просмотра на мобильном телефоне, часть контента в нижнем колонтитуле скрыта, и я хочу разрешить прокрутку липкого нижнего колонтитула.
Я поискал в Интернете и нашел решение: добавление overflow-y-auto и определение максимальной высоты нижнего колонтитула.

Я применил и протестировал параметры разработчика Chrome. Эта стратегия работает на устройствах Iphone SE и Samsung S8+, однако Google Pixel 7, iPhone 14, iPhone 12 и iPhone XR, похоже, с ней не работают.
Я надеюсь, что кто-нибудь подскажет мне, что мне делать. чтобы включить прокрутку и на других мобильных устройствах.

Подробнее здесь: https://stackoverflow.com/questions/787 ... t-overflow