From d48981872da8a93fd34a4634cb460642867145cf Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Sun, 25 Sep 2022 15:14:31 +0100
Subject: [PATCH] ensure the dom is setup so that the avalonia elements tracks
 the size and position of container div.

---
 src/Web/Avalonia.Web/AvaloniaView.cs                |  4 ++--
 src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Web/Avalonia.Web/AvaloniaView.cs b/src/Web/Avalonia.Web/AvaloniaView.cs
index 08d4505bd6..e522524ecf 100644
--- a/src/Web/Avalonia.Web/AvaloniaView.cs
+++ b/src/Web/Avalonia.Web/AvaloniaView.cs
@@ -115,7 +115,7 @@ namespace Avalonia.Web
 
             _topLevelImpl.SetClientSize(_canvasSize, _dpi);
 
-            DomHelper.ObserveSize(_canvas, _canvas.GetPropertyAsString("id")!, OnSizeChanged);
+            DomHelper.ObserveSize(host, divId, OnSizeChanged);
 
             CanvasHelper.RequestAnimationFrame(_canvas, true);
         }
@@ -124,7 +124,7 @@ namespace Avalonia.Web
         {
             var point = new RawPointerPoint
             {
-                Position = new Point(args.GetPropertyAsDouble("clientX"), args.GetPropertyAsDouble("clientY")),
+                Position = new Point(args.GetPropertyAsDouble("offsetX"), args.GetPropertyAsDouble("offsetY")),
                 Pressure = (float)args.GetPropertyAsDouble("pressure"),
                 XTilt = (float)args.GetPropertyAsDouble("tiltX"),
                 YTilt = (float)args.GetPropertyAsDouble("tiltY"),
diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
index fcb66f80be..81ad34acaa 100644
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
@@ -3,11 +3,6 @@ export class AvaloniaDOM {
         // Root element
         host.classList.add("avalonia-container");
         host.tabIndex = 0;
-        host.style.touchAction = "none";
-        // host.style.position = "relative";
-        host.style.position = "fixed";
-        host.style.width = "100vw";
-        host.style.height = "100vh";
         host.oncontextmenu = function () { return false; };
 
         // Rendering target canvas
@@ -16,12 +11,13 @@ export class AvaloniaDOM {
         canvas.style.backgroundColor = "#ccc";
         canvas.style.width = "100%";
         canvas.style.height = "100%";
-        //canvas.style.position = "absolute";
         host.appendChild(canvas);
         
         // Native controls host
         const nativeHost = document.createElement("div");
         nativeHost.classList.add('avalonia-native-host');
+        nativeHost.style.left = "0px";
+        nativeHost.style.top = "0px";
         nativeHost.style.width = "100%";
         nativeHost.style.height = "100%";
         nativeHost.style.position = "absolute";
@@ -33,6 +29,8 @@ export class AvaloniaDOM {
         inputElement.type = "text";
         inputElement.classList.add('avalonia-input-element');
         inputElement.style.opacity = "0";
+        inputElement.style.left = "0px";
+        inputElement.style.top = "0px";
         inputElement.style.width = "100%";
         inputElement.style.height = "100%";
         inputElement.style.position = "absolute";