[bug] IOS pop-up keyboard causes webview to move outside the screen

[nashaofu]

Describe the bug

IOS pop-up keyboard causes webview to move outside the screen

Reproduction

Place an input element on the page, click on the element, and wake up the keyboard

Expected behavior

The webview height changes to screen height minus keyboard height

Full tauri info output

[✔] Environment
    - OS: Mac OS 14.5.0 X64
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.78.0 (9b00956e5 2024-04-29)
    ✔ cargo: 1.78.0 (54d8815d0 2024-03-26)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-apple-darwin (default)
    - node: 20.12.0
    - yarn: 1.22.22
    - npm: 10.5.0

[-] Packages
    - tauri [RUST]: 2.0.0-beta.20
    - tauri-build [RUST]: 2.0.0-beta.16
    - wry [RUST]: 0.40.0
    - tao [RUST]: 0.28.0
    - @tauri-apps/api [NPM]: 2.0.0-beta.12
    - @tauri-apps/cli [NPM]: 2.0.0-beta.18

[-] App
    - build-type: bundle
    - CSP: img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src 'self' http://ipc.localhost; default-src 'self'; font-src 'self' data:
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite

[-] iOS
    - Developer Teams:

Stack trace

No response

Additional context

https://github.com/tauri-apps/tauri/assets/19303058/5cf1b708-9d20-466d-a6f1-9af9951fe8fe

No response

[pewsheen]

I think that is the default behavior for iOS. You may need to change your page height according to the visualViewport.height

[nashaofu]

I think VisualViewPort is no effect.

When the keyboard is not popped up, the window.innerHeight is 776，This is the window size when the keyboard pops up:

The following is the effect of using VisualViewPort. VisualViewPort events will be delayed, so the effect is very bad. I think it's still necessary to change the height of the container.

  const appBarRef = useRef<HTMLElement>(null);
  useEffect(() => {
    const onVisualViewportChange = () => {
      const offsetTop = window.visualViewport?.offsetTop;
      if (appBarRef.current) {
        appBarRef.current.style.transform = `translateY(${offsetTop}px)`;
      }
    };
    window.visualViewport?.addEventListener('scroll', onVisualViewportChange);
    window.visualViewport?.addEventListener('resize', onVisualViewportChange);

    return () => {
      window.visualViewport?.removeEventListener(
        'scroll',
        onVisualViewportChange,
      );

      window.visualViewport?.removeEventListener(
        'resize',
        onVisualViewportChange,
      );
    };
  }, []);

https://github.com/tauri-apps/tauri/assets/19303058/f1d2d444-3d8a-466a-a4aa-987cf831a814