Incorrect values returned by MountedData::get_client_rect()

[jeancf]

Problem

The first call to MountedData::get_client_rect() in onmounted returns incorrect values.

Steps To Reproduce

• create main.rs

#![allow(non_snake_case)]

use dioxus::prelude::*;
use log::LevelFilter;

fn main() {
    // Init debug
    dioxus_logger::init(LevelFilter::Debug).expect("failed to init logger");

    dioxus::launch(App);
}

#[component]
fn App() -> Element {

    rsx! {
        link { rel: "stylesheet", href: "main.css" }
        div {
            "class": "box",
            position: "absolute",
            top: "150px",
            left: "150px",
            onmounted: move |ev: Event<MountedData>| async move {
                let rect = ev.data().get_client_rect().await.unwrap();
                log::debug!("{:?}", rect);
            },
            "BOX"
        }
    }
}

• create main.css

.box {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    color: black;
}

• run dx serve
• observe [DEBUG] graph - Rect(31.6875x22.0 at (150.0, 150.0)) in the log incorrect
• change attribute to top: "200px", then back to top: "150px", for example
• observe [DEBUG] graph - Rect(102.0x102.0 at (150.0, 150.0)) in the log correct

Expected behavior

The correct dimensions are reported right away: Rect(102.0x102.0 at (150.0, 150.0)).

I think that the value of the attributes set in the css file are not taken into account correctly at the first call. If I move the width and height attributes from the css file directly into the element, the first call returns Rect(100.0x100.0 at (150.0, 150.0)) which is still incorrect but correctly takes into account the values of width and height (the difference is the border thickness, that is still set in the css file).

Environment:

• Dioxus version: 0.5.1
• Rust version: 1.77.2, stable
• OS info: Manjaro Linux - App platform: desktop