tauri-apps / tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
https://tauri.app
Apache License 2.0
81.86k stars 2.46k forks source link

[bug] visualViewport API fails to account for mobile keyboard height #10631

Open Eudritch opened 1 month ago

Eudritch commented 1 month ago

Describe the bug

The visualViewport height in Tauri does not adjust correctly when the keyboard is shown or hidden, which affects the layout of websites. This issue is significant because many websites use visualViewport to adjust their layout dynamically, particularly to align tools and content above the on-screen keyboard.

Reproduction

  1. Use the code snippet below to set up a listener for viewport resizing:
if (window.visualViewport) {
    // bottomOffset = '30px'
    viewportResizeUnsubscriber = createUnsubscribableListener(window, 'resize', () => {
        positionBottom = `${window.innerHeight - window.visualViewport!.height}px`;
    });
}
  1. Open the application on an Android device or emulator with a Tauri environment.
  2. Trigger the on-screen keyboard by focusing on an input field.
  3. Observe that the visualViewport height does not change correctly, resulting in incorrect positioning of elements.

Expected behavior

When the on-screen keyboard is shown or hidden, window.visualViewport.height should accurately reflect the visible portion of the viewport, allowing for proper adjustment of elements positioned above the keyboard.

Full tauri info output

[✔] Environment
    - OS: Windows 10.0.22631 X64
    ✔ WebView2: 127.0.2651.98
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.80.0 (051478957 2024-07-21)
    ✔ cargo: 1.80.0 (376290515 2024-07-16)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
    - node: 20.11.1
    - pnpm: 8.15.5
    - npm: 10.2.4
    - bun: 1.1.8

[-] Packages
    - tauri [RUST]: 2.0.0-beta.25
    - tauri-build [RUST]: 2.0.0-beta.19
    - wry [RUST]: 0.41.0
    - tao [RUST]: 0.28.1
    - @tauri-apps/api [NPM]: 2.0.0-beta.16
    - @tauri-apps/cli [NPM]: 2.0.0-beta.23

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../build
    - devUrl: http://localhost:1420/
    - framework: Svelte
    - bundler: Vite

Stack trace

No response

Additional context

This problem is related to Tauri issue #9907.

Eudritch commented 1 month ago

Observation for debugging: On Android, the issue can be resolved by navigating to the home screen without closing the app and then returning to the app. It is unclear if this workaround also applies to iOS.