Salut les développeurs ! J'ai découvert cela en travaillant sur mon application de prise de notes.
Voici un article utilisant mon application.
Partager les progrès sur X (Twitter)

Avez-vous déjà été surpris que CSS ne fonctionne pas comme vous l'espériez ?
Cela m'est (encore) arrivé lorsque j'ai fixé un élément à fixer en bas, puis j'ai ouvert le clavier de mon iPhone.

Ce que j'ai vu, c'est que cet élément n'est pas visible du tout.
Parce que c'est réparé. Vers le bas. Derrière le clavier.

On dirait que pour corriger le correctif, nous avons besoin de JS.

VisualViewport

Il existe une API de navigateur avec un bon support qui peut être utilisée à ces fins : VisualViewport.
Il renvoie la largeur et la hauteur de la fenêtre visible réelle. Lien MDN vers la documentation.
Cependant, effectuez votre propre enquête pour voir s'il est pris en charge pour les versions que vous ciblez.

Mathématiques

Fondamentalement, nous devons gérer la position de l'élément par rapport à la fenêtre d'affichage visuelle, ainsi que la position de défilement et la hauteur de l'élément. Faisons le calcul.

De plus, comme les calculs sont beaucoup plus simples de cette façon, il est logique d'utiliser le paramètre top au lieu du paramètre bottom.

top = viewport height   scroll - element height

Mise en œuvre

J'utiliserai React. Pour tout autre framework, vous pouvez simplement copier le contenu du hook 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
      
    >
  );
};

Résultats finaux

J'avais également besoin d'ajouter quelques animations et de masquer mon bloc lors du défilement, mais vous n'êtes pas obligé de le faire et il sera toujours visible.