¡Hola desarrolladores! Descubrí esto mientras trabajaba en mi aplicación para tomar notas.
Aquí hay una publicación usando mi aplicación.
Compartiendo el progreso en X (Twitter)

¿Alguna vez te ha sorprendido que CSS no funcione como esperabas?
Eso me pasó (nuevamente) cuando configuré un elemento para que se fijara en la parte inferior y luego abrí el teclado de mi iPhone.

Lo que he visto es que ese elemento no es visible en absoluto.
Porque está arreglado. Hasta el fondo. Detrás del teclado.

Parece que para solucionar el problema necesitamos algo de JS.

VisualViewport

Existe una API de navegador con buen soporte que se puede utilizar para estos fines: VisualViewport.
Devuelve el ancho y alto de la ventana gráfica visible real. Enlace MDN a documentos.
Sin embargo, investigue usted mismo para ver si es compatible con las versiones a las que se dirige.

Matemáticas

Básicamente, necesitamos manejar la posición del elemento con respecto a la ventana gráfica, así como la posición de desplazamiento y la altura del elemento. Hagamos los cálculos.

Además, dado que las matemáticas son mucho más simples de esta manera, tiene sentido usar el parámetro superior en lugar del inferior.

top = viewport height   scroll - element height

Implementación

Usaré React. Para cualquier otro marco, simplemente puede copiar el contenido del 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 finales

También necesitaba agregar algunas animaciones y ocultar mi bloque al desplazarme, pero no es necesario hacerlo y siempre estará visible.