chrome-keyboard-fix.html

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no interactive-widget=resizes-content"/>

safari-keyboard-viewport-fix.js

document.addEventListener("DOMContentLoaded", () => {
  if (isSafari() && window.visualViewport) {
    let { getValue: getOffsetTop, setValue: setOffsetTop } = useThrottledValue(
      window.visualViewport.offsetTop,
      100,
    );
    let keyboardIsOpen = false;

    const hideKeyboardOnScrollWindow = (e) => {
      const windowIsScrolled =
        window.visualViewport.offsetTop !== getOffsetTop();

      if (keyboardIsOpen && windowIsScrolled) {
        document.activeElement.blur();
      }
    };

    window.visualViewport.addEventListener("resize", (e) => {
      const isInputFocused = ["INPUT", "TEXTAREA"].includes(
        document.activeElement?.tagName,
      );

      if (isInputFocused && !keyboardIsOpen) {
        keyboardIsOpen = true;
        window.addEventListener("touchmove", hideKeyboardOnScrollWindow);
        window.addEventListener("scroll", hideKeyboardOnScrollWindow);
      }
      if (!isInputFocused) {
        keyboardIsOpen = false;
        window.removeEventListener("touchmove", hideKeyboardOnScrollWindow);
        window.removeEventListener("scroll", hideKeyboardOnScrollWindow);
      }
      setOffsetTop(window.visualViewport.offsetTop);
    });
  }

  function isSafari() {
    const userAgent = navigator.userAgent;
    return userAgent.includes("Safari") && !userAgent.includes("Chrome");
  }

  function useThrottledValue(initialValue, delay) {
    let rawValue = initialValue;
    let throttledValue = initialValue;
    let timeoutId = null;

    const updateThrottledValue = () => {
      throttledValue = rawValue;
    };

    return {
      setValue: function (newValue) {
        rawValue = newValue;
        if (!timeoutId) {
          updateThrottledValue();
          timeoutId = setTimeout(() => {
            timeoutId = null;
          }, delay);
        }
      },
      getValue: function () {
        return throttledValue;
      },
    };
  }
});