Transform incorrectly affects elements coordinates #663

use dioxus_native::prelude::*;

pub fn main() {
    dioxus_native::launch(app);
}

fn app() -> Element {
    let widget = use_memo(|| dioxus_native::CustomWidgetAttr::new(MarkerWidget {}));
    rsx!(
        style { {STYLES} }
        div {
            style: "position: relative; transform: translate(50px, 20px); width: 300px; height: 300px; border: 1px solid blue",
            onpointerdown: move |evt| {
                let client = evt.client_coordinates();
                let element = evt.element_coordinates();
                let page = evt.page_coordinates();
                let screen = evt.screen_coordinates();
                println!("parent client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",client.x, client.y, element.x, element.y, page.x, page.y, screen.x, screen.y);
            },
            div {
                id: "canvas-container",
                style: "position: absolute; top: 10px; left: 10px; width: 200px; height: 200px; border: 1px solid red;",
                onpointerdown: move |evt| {
                    let client = evt.client_coordinates();
                    let element = evt.element_coordinates();
                    let page = evt.page_coordinates();
                    let screen = evt.screen_coordinates();
                    println!("child  client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",client.x, client.y, element.x, element.y, page.x, page.y, screen.x, screen.y);
                },
                object { "data": widget }
            }
        }
    )
}

struct MarkerWidget;
impl dioxus_native::Widget for MarkerWidget {
    fn handle_event(&mut self, event: &blitz_traits::events::UiEvent) {
        if let blitz_traits::events::UiEvent::PointerDown(evt) = event {
            println!(
                "widget client {:.1} {:.1}, element {:.1} {:.1}, page {:.1} {:.1}, screen {:.1} {:.1}",
                evt.client_x(), evt.client_y(), evt.element_x(), evt.element_y(), evt.page_x(), evt.page_y(), evt.screen_x(), evt.screen_y()
            );
        }
    }
}

const STYLES: &str = "
* {
    box-sizing: border-box;
}

html, body, main {
    width: 100vw;
    height: 100vh;
    margin: 0;
}

object {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}
";