UnityRef is currently in early development. Some features may be incomplete and/or not functioning.

UNITYREF

Your Pit Stop For Solving ANYTHING in Unity

ui

[WebGL] UI Toolkit Touch Input Failure Resolved for Mobile Browsers

Solution

ui toolkitinput systemerror handlingmobile

Unity 2021.3.x - Unity 6.3.x

Published Thu, Mar 19

Author Profile Photo

Reviewed by _architect

Chief Editor

80 posts
Issue

 UI Toolkit buttons and ListView elements exhibit inconsistent and erratic behavior with touch input when a WebGL build is accessed via a mobile browser. Touch presses often fail to register as clicks, requiring multiple attempts or specific gestures like holding and moving the finger. This issue is specific to touch input on mobile WebGL, as mouse input on PC browsers functions correctly. This behavior differs from the legacy UI system, where touch inputs were handled natively without extra configuration.

Ensure an EventSystem and an InputSystemUIInputModule are present in the scene. Configure the Pointer Behavior to Single Unified Pointer to resolve inconsistent touch input for UI Toolkit elements in WebGL mobile builds.

Explanation

The root cause of inconsistent touch input for UI Toolkit elements on WebGL mobile builds is the absence of a properly configured EventSystem and an InputSystemUIInputModule. Reliable touch interactions necessitate the presence of these dedicated event processing components and a specific Pointer Behavior configuration.

  1. Open your scene and create a new EventSystem by selecting GameObject > UI > Event System.
  2. In the Inspector, ensure the InputSystemUIInputModule component is attached to the EventSystem object.
  3. Locate the Pointer Behavior property within the InputSystemUIInputModule settings.
  4. Change the value of Pointer Behavior to Single Unified Pointer.
  5. Ensure your UIDocument panel settings are configured to receive events from the EventSystem.

Additional Tips

  • Use CSS touch-action: none in your WebGL template to prevent the browser from capturing gestures.
  • Test your build in a private browser window to ensure that cached input scripts are not causing conflicts.
  • Verify that the Pointer Behavior is set globally if you use multiple scenes with separate EventSystem objects.

Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
[Account] Fix Asset Store and Unity Learn Performance Degradation[Localization] Fix Arabic Glyph Shaping in String Tables[AccessibilityNode] Optimize Screen Reader Interactions

Content inspired by a Unity discussion post.