3 files changed, 37 insertions, 20 deletions

diff --git a/platform/web/display_server_web.cpp b/platform/web/display_server_web.cpp
index a51c161b9c..335a18fa59 100644
--- a/platform/web/display_server_web.cpp
+++ b/platform/web/display_server_web.cpp
@@ -866,6 +866,9 @@ void DisplayServerWeb::_ime_callback(int p_type, const String &p_text) {
 		default:
 			break;
 	}
+
+	ds->process_keys();
+	Input::get_singleton()->flush_buffered_events();
 }
 
 void DisplayServerWeb::window_set_ime_active(const bool p_active, WindowID p_window) {
@@ -1353,29 +1356,33 @@ DisplayServer::VSyncMode DisplayServerWeb::window_get_vsync_mode(WindowID p_vsyn
 }
 
 void DisplayServerWeb::process_events() {
+	process_keys();
 	Input::get_singleton()->flush_buffered_events();
 	if (godot_js_input_gamepad_sample() == OK) {
 		process_joypads();
-		for (int i = 0; i < key_event_pos; i++) {
-			const DisplayServerWeb::KeyEvent &ke = key_event_buffer[i];
+	}
+}
 
-			Ref<InputEventKey> ev;
-			ev.instantiate();
-			ev->set_pressed(ke.pressed);
-			ev->set_echo(ke.echo);
-			ev->set_keycode(ke.keycode);
-			ev->set_physical_keycode(ke.physical_keycode);
-			ev->set_key_label(ke.key_label);
-			ev->set_unicode(ke.unicode);
-			ev->set_location(ke.location);
-			if (ke.raw) {
-				dom2godot_mod(ev, ke.mod, ke.keycode);
-			}
+void DisplayServerWeb::process_keys() {
+	for (int i = 0; i < key_event_pos; i++) {
+		const DisplayServerWeb::KeyEvent &ke = key_event_buffer[i];
 
-			Input::get_singleton()->parse_input_event(ev);
+		Ref<InputEventKey> ev;
+		ev.instantiate();
+		ev->set_pressed(ke.pressed);
+		ev->set_echo(ke.echo);
+		ev->set_keycode(ke.keycode);
+		ev->set_physical_keycode(ke.physical_keycode);
+		ev->set_key_label(ke.key_label);
+		ev->set_unicode(ke.unicode);
+		ev->set_location(ke.location);
+		if (ke.raw) {
+			dom2godot_mod(ev, ke.mod, ke.keycode);
 		}
-		key_event_pos = 0;
+
+		Input::get_singleton()->parse_input_event(ev);
 	}
+	key_event_pos = 0;
 }
 
 int DisplayServerWeb::get_current_video_driver() const {
diff --git a/platform/web/display_server_web.h b/platform/web/display_server_web.h
index 49a017015a..17e919b6e2 100644
--- a/platform/web/display_server_web.h
+++ b/platform/web/display_server_web.h
@@ -145,6 +145,7 @@ private:
 	static void _drop_files_js_callback(const Vector<String> &p_files);
 
 	void process_joypads();
+	void process_keys();
 
 	static Vector<String> get_rendering_drivers_func();
 	static DisplayServer *create_func(const String &p_rendering_driver, WindowMode p_window_mode, VSyncMode p_vsync_mode, uint32_t p_flags, const Vector2i *p_position, const Vector2i &p_resolution, int p_screen, Error &r_error);
diff --git a/platform/web/js/libs/library_godot_input.js b/platform/web/js/libs/library_godot_input.js
index 1292c468f5..7ea89d553f 100644
--- a/platform/web/js/libs/library_godot_input.js
+++ b/platform/web/js/libs/library_godot_input.js
@@ -63,8 +63,15 @@ const GodotIME = {
 
 		ime_position: function (x, y) {
 			if (GodotIME.ime) {
-				GodotIME.ime.style.left = `${x}px`;
-				GodotIME.ime.style.top = `${y}px`;
+				const canvas = GodotConfig.canvas;
+				const rect = canvas.getBoundingClientRect();
+				const rw = canvas.width / rect.width;
+				const rh = canvas.height / rect.height;
+				const clx = (x / rw) + rect.x;
+				const cly = (y / rh) + rect.y;
+
+				GodotIME.ime.style.left = `${clx}px`;
+				GodotIME.ime.style.top = `${cly}px`;
 			}
 		},
 
@@ -99,10 +106,12 @@ const GodotIME = {
 			ime.style.background = 'none';
 			ime.style.opacity = 0.0;
 			ime.style.position = 'fixed';
+			ime.style.textAlign = 'left';
+			ime.style.fontSize = '1px';
 			ime.style.left = '0px';
 			ime.style.top = '0px';
-			ime.style.width = '2px';
-			ime.style.height = '2px';
+			ime.style.width = '100%';
+			ime.style.height = '40px';
 			ime.style.display = 'none';
 			ime.contentEditable = 'true';