開発者の皆さん！メモアプリを使っているときにこれを発見しました。
私のアプリを使った投稿はこちらです。
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
      
    >
  );
};

最終結果

アニメーションを追加して、スクロール時にブロックを非表示にする必要もありましたが、その必要はなく、ブロックは常に表示されます。