Unity WebGL Mobile UI/UX Issues with Input Fields and Virtual Keyboard

Getting Started
,
1

Hey everyone,

I’m currently developing a Unity WebGL project with UI built entirely in Unity using the Canvas system, and I’m running into some frustrating user experience issues when testing on mobile browsers (both Android and iOS):

  1. Virtual Keyboard Overlapping Input Fields

When a user taps an input field, the virtual keyboard appears, but it ends up covering the input field, making it hard (or impossible) to see what you’re typing. There’s no automatic scroll or repositioning of the canvas to bring the focused input field above the keyboard, which is pretty crucial for usability.

  1. Screen Shift Due to Native Text Input UI

On certain mobile devices and browsers, when the keyboard appears, a native browser text field (kind of like a suggestion or quick input bar) also shows up at the top. This causes the whole page to scroll or shift, and the Unity canvas gets pushed or misaligned, breaking the layout or pushing the actual input off-screen.

  1. Additional UX Concerns
  • No Soft Keyboard Awareness: Unity WebGL doesn’t seem to have reliable detection for the keyboard height or state, making it hard to adjust the layout manually.
  • Inconsistent Behavior Across Browsers: What works in Chrome on Android might break in Safari on iOS, or even behave differently across versions of the same browser.

What I’m Looking For

  • Workarounds or best practices to reposition input fields above the keyboard on focus.
  • Tips for locking canvas position or handling layout shift due to native browser UI.
  • Any proven solutions or third-party plugins that improve WebGL mobile input experience.
2

I implemented a working solution that combines Unity’s WebGL build with a custom HTML/JavaScript bridge, using SendMessage to communicate with Unity. This allows:

:white_check_mark: Native mobile input fields overlaid on top of Unity
:white_check_mark: Proper repositioning and soft keyboard handling
:white_check_mark: A cleaner, consistent user experience across Android & iOS browsers

checkout this Github repo:
GitHub - khanRehan-04/Unity-WebGL-HTML-InputFix: # 🧩 Unity WebGL & HTML Input Bridge

3

Thanks for sharing that!

4

Hello @rehansunity, I was just wondering if this is still being worked on?
From what I can tell the version of Unity it was tested for is nolonger a recomended version due to security issues and I have not been able to get it to work on any of the current LTS builds of Unity.
The issue seems to be in the Templates Index.html, when I upload a project using that template to Itch.IO it never gets passed the Unity loading screen however as soon as I replace the Index.html with the default one the project loads just without the functionality of your Input Bridge.

I have been getting the exact same behaviour if I just build and post the project from the GitHub page you linked earlier.

Thanks in advance for any help you can provide.