Olá, desenvolvedores! Descobri isso enquanto trabalhava em meu aplicativo de anotações.
Aqui está uma postagem usando meu aplicativo.
Compartilhando o progresso no X (Twitter)

Você já se surpreendeu ao saber que o CSS não está funcionando da maneira que você esperava?
Isso aconteceu comigo (de novo) quando configurei um elemento para ser fixado na parte inferior e depois abri o teclado do meu iPhone.

O que vi é que o elemento não está visível.
Porque está consertado. Para o fundo. Atrás do teclado.

Parece que para corrigir o problema, precisamos de algum JS.

VisualViewport

Existe uma API de navegador com bom suporte que pode ser usada para esses fins: VisualViewport.
Ele retorna a largura e a altura da janela de visualização visível real. Link MDN para documentos.
No entanto, faça sua própria investigação para ver se ele é compatível com as versões que você está almejando.

Matemática

Basicamente, precisamos lidar com a posição do elemento em relação à janela de visualização visual, bem como a posição de rolagem e a altura do elemento. Vamos fazer as contas.

Além disso, como a matemática é muito mais simples dessa forma, faz sentido usar o parâmetro top em vez do bottom.

top = viewport height   scroll - element height

Implementação

Vou usar React. Para qualquer outra estrutura, você pode simplesmente copiar o conteúdo do gancho 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
      
    >
  );
};

Resultados finais

Também precisei adicionar algumas animações e ocultar meu bloco na rolagem, mas você não precisa fazer isso e ele sempre estará visível.