From 01127d6693fae13ece7a7082a5f4591124071b1d Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Mon, 26 Sep 2022 10:11:57 +0100
Subject: [PATCH] style the input element correctly for IME support.

---
 .../webapp/modules/avalonia/dom.ts             | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
index 0333c3d734..ad6d451343 100644
--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/dom.ts
@@ -26,16 +26,20 @@ export class AvaloniaDOM {
 
         // IME
         const inputElement = document.createElement("input");
+        inputElement.classList.add('avalonia-input-element');
         inputElement.autocapitalize = "none";
         inputElement.type = "text";
-        inputElement.classList.add('avalonia-input-element');
-        inputElement.style.display = "none";
-        inputElement.style.opacity = "0";
-        inputElement.style.left = "0px";
-        inputElement.style.top = "0px";
-        inputElement.style.width = "100%";
-        inputElement.style.height = "100%";
+        inputElement.spellcheck = false;
+        inputElement.style.padding = "0";
+        inputElement.style.margin = "0";
         inputElement.style.position = "absolute";
+        inputElement.style.overflow = "hidden";
+        inputElement.style.borderStyle = "hidden";
+        inputElement.style.outline = "none";
+        inputElement.style.background = "transparent";
+        inputElement.style.color = "transparent";
+        inputElement.style.display = "none";
+        inputElement.style.height = "20px";
         inputElement.onpaste = function () { return false; };
         inputElement.oncopy = function () { return false; };
         inputElement.oncut = function () { return false; };