DioxusLabs / DioxusLabs/dioxus

Incorrect values returned by MountedData::get_client_rect()

Open
#2,293 3 comments 1 reaction 0 assignees View on GitHub
bug html
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

**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| 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`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.