Keyboard appearing causes elements to shrink on Y axis

[GhostUponAvon]

Problem

When the keyboard appears it causes elements that depend on the view port size to shrink on the Y axis. This is only evident from what I can see for elements that depend on parent element heights.

May be a mobile web render specific problem and not necessarily specific to Dioxus: https://stackoverflow.com/questions/39585950/mobile-keyboard-changes-html-viewport-size

Steps To Reproduce

Steps to reproduce the behavior:

• Set the body width and height to the maximum of the view port in CSS:

body {
    background-color: #0f1116;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0px;

#hero {
    margin: 0;
    display: flex;
    flex-direction: column;
}

• Create a div with maximum height and width of the view port and create child elements that depend on its height value using "%"; must include an input field to trigger the keyboard. In the follow example the button and the inputs height are 20% that of the parent div:

use dioxus::prelude::*;

const MAIN_CSS: Asset = asset!("/assets/main.css");

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        Hero {}

    }
}

#[component]
pub fn Hero() -> Element {
    rsx! {
        div {
            id: "hero",
            height: "100vh",
            width: "100vw",
            background_color: "black",


            button { 
                height: "20%",
                width: "100vw",

                "This button will change size"
            },

            input { height: "20%" }
        }
    }
}

Expected behavior

Upon clicking the input field and the keyboard appearing, the button and input field should shrink (because the view port size changes?). This is not too bad, but for more complex styling it starts to negatively effect the UI. Please note: controlled testing was done on an emulator (Pixel 8), but I have observed it affect real devices.

Screenshots

Before (emulator):

After (emulator):

Environment:

• Dioxus version: dioxus-cli: v0.63, dioxus: v6.0
• Rust version: 1.83.0 (stable)
• OS info: NixOS 25.05
• App platform: Android

[ealmloff]

You can use eval to get the screen width and manually calculate the element size as a percentage of that.

This seems more like browser behavior than a bug with dioxus, so I'm converting this to a discussion