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

nashaofu commented 5 months ago

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 commented 5 months ago

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

nashaofu commented 5 months ago

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

nashaofu commented 3 months ago

Does anyone follow up with this question?

Eudritch commented 3 months ago

Same problem on Android — the visualViewport height is incorrect and it rarely functions as expected.

Fais649 commented 1 month ago

Is anyone looking into this? I'm trying to make my app work on ios and this issue is a real problem

tauri-apps / tauri