Привет, разработчики! Я обнаружил это, работая над своим приложением для заметок.
Вот пост с использованием моего приложения.
Делимся прогрессом в X (Twitter)

Вы когда-нибудь удивлялись, что CSS работает не так, как вы ожидали?
Это случилось со мной (снова), когда я установил элемент для фиксации внизу, а затем открыл клавиатуру на своем iPhone.

Я видел, что этот элемент вообще не виден.
Потому что это исправлено. До дна. За клавиатурой.

Похоже, чтобы исправить это, нам нужен JS.

ВизуальныйВьюпорт

Для этих целей можно использовать API браузера с хорошей поддержкой: VisualViewport.
Он возвращает ширину и высоту фактического видимого окна просмотра. Ссылка MDN на документацию.
Однако проведите собственное расследование, чтобы узнать, поддерживается ли он для версий, на которые вы ориентируетесь.

Математика

По сути, нам нужно обрабатывать положение элемента относительно области визуального просмотра, а также положение прокрутки и высоту элемента. Давайте посчитаем.

Кроме того, поскольку математические вычисления в этом случае намного проще, имеет смысл использовать верхний параметр вместо нижнего.

top = viewport height   scroll - element height

Выполнение

Я буду использовать React. Для любого другого фреймворка вы можете просто скопировать содержимое хука useEffect.

import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';

const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref

export const FixedBlock = () => {
  // top postion -> the most important math result goes here
  const [top, setTop] = useState(0);

  useEffect(() => {
    function resizeHandler() {
      // viewport height
      const viewportHeight = window.visualViewport?.height ?? 0;
      // math
      setTop(viewportHeight   window.scrollY - elementHeight)
    }

    // run first time to initialize 
    resizeHandler();

    // subscribe to events which affect scroll, or viewport position
    window.visualViewport?.addEventListener('resize', resizeHandler);
    window.visualViewport?.addEventListener('scroll', resizeHandler);
    window?.addEventListener('touchmove', resizeHandler);

    // unsubscribe
    return () => {
      window.visualViewport?.removeEventListener('resize', resizeHandler);
      window.visualViewport?.removeEventListener('scroll', resizeHandler);
      window?.removeEventListener('touchmove', resizeHandler);
    };
  }, [debouncedScroll]);

  return (
    
      

        I am fixed
      
    >
  );
};

Окончательные результаты

Мне также нужно было добавить несколько анимаций и скрыть блок при прокрутке, но это не обязательно, и он всегда будет виден.