Fix: Construct 3 Touch Input Lag on Android PWA

Your Construct 3 game plays smoothly on desktop. Deploy as a PWA on Android and taps feel like they’re registering 200ms late. The character’s jump comes well after the player’s finger touches the screen. It’s playable but doesn’t feel responsive.

The 300ms Tap Delay

Mobile browsers historically waited about 300ms after touchend to fire a click event, in case the user was about to do a double-tap-to-zoom. Modern browsers (Chrome 32+, Safari 13+) remove the delay if the page declares itself touch-aware via the viewport meta tag. If your exported PWA lacks the correct viewport setting, the delay returns — and 300ms of input latency is brutal for games.

Fix 1: Use the Touch Object

Replace Mouse-based input with Touch-based events:

• Add the Touch object to your project.
• Replace On Click conditions with On Touch or On Touch end.
• For drag mechanics, use Touch Is touching and Touch.X / Touch.Y.

Touch events fire on the actual touchstart/touchend without the click delay. Even with the viewport fix, this is the more reliable cross-platform path for game input.

Fix 2: Confirm the Viewport Meta Tag

Open Project Properties → Advanced → Viewport. Ensure it’s set to scale appropriately. The exported HTML should include:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

If the exported HTML lacks this tag, browsers assume desktop viewport and re-introduce tap delay. After export, inspect index.html and confirm the tag is present.

Fix 3: touch-action: none

Even with touch events, the browser may intercept gestures for scrolling or zoom. Add CSS to the canvas:

canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

Add via Project Properties → Custom CSS or by adding a script that injects the rule on load. touch-action: none tells the browser the canvas handles all touch gestures itself — no scrolling, no zoom, no pull-to-refresh.

Fix 4: Prevent Pull-to-Refresh

On Android Chrome PWAs, pulling down at the top of the page triggers refresh. Disable in your manifest:

{
  "display": "fullscreen",
  "orientation": "landscape"
}

Fullscreen PWAs don’t expose the browser UI, so pull-to-refresh doesn’t apply. Combined with touch-action: none, every gesture is yours.

Fix 5: Vibration Polyfill

If you use navigator.vibrate via a script for haptic feedback and it’s wrapped in a debounce or async wrapper, calls can queue and arrive late. Call it synchronously inline with the input event:

// On Touch event sheet
Browser.ExecJS("navigator.vibrate && navigator.vibrate(20)");

Inline ExecJS calls run in the same JS task as the touch handler, with minimal latency.

Verifying

Run a back-to-back test with a desktop browser and the Android PWA. Tap a known-instant action (e.g., a single-frame visual response). Use a high-frame-rate camera or screen recording at 60+ FPS to count frames between touch and response. Target: 1–3 frames (16–50ms). Before the fix, you may see 12+ frames (200+ ms).

Understanding the issue

Input bugs are perceptible to players even when the gameplay code is correct. A 16ms delay that the profiler considers fine is the difference between 'responsive' and 'sluggish'. The fix is often in the input pipeline, not the gameplay.

The specific bug described above is the kind that surfaces during integration rather than unit testing. It depends on a combination of factors: the asset configuration, the runtime state, the platform's specific behavior. In isolation, each piece looks correct; in combination, the bug emerges. This is why thorough integration testing - playing the actual game in realistic conditions - catches things that automated tests miss.

Why this happens

This bug class disproportionately affects late-stage development. The work to surface it is interactive testing in realistic conditions, which only really happens after the gameplay is in place and assets are populated. Catching it early requires deliberate testing of conditions that look unimportant.

At the engine level, the behavior comes from a deliberate design decision in Construct 3. The engine team chose a particular trade-off - usually performance versus convenience, or generality versus specificity - and that trade-off has consequences when you push against it. Understanding the trade-off is what turns 'this bug is mysterious' into 'this bug is the expected consequence of this design'.

Verifying the fix

After applying the fix, the verification step has three parts: confirm the original repro is resolved, confirm no obvious regressions in adjacent functionality, and (for shipping titles) deploy to a small player cohort first and watch the crash and report rates. Each step catches something the others miss.

Reproducibility is the prerequisite for verification. If you can't reliably reproduce the bug pre-fix, you can't reliably verify it post-fix. Spend time getting a clean reproduction before you write any fix code. The fix is fast once you understand the reproduction; the reproduction is the slow part.

Variations to watch for

Related bug classes often share the same root cause. If you find yourself fixing this issue, look for cousins: similar symptoms in adjacent systems, the same data flow but a different value, or the same fix pattern in another module. The catalog of 'we've seen this before' becomes valuable institutional knowledge.

Adjacent bugs often share a root cause. After fixing the case you've found, spend an hour searching the codebase for similar patterns. What's the same call with different arguments? The same data flow with a different entity type? The same lifecycle issue in a sibling system? Each match is a candidate for the same fix, or a related fix that prevents future bugs of the same class.

In production

For shipping titles with a long support window, watch for this issue resurfacing after dependency updates. Engine upgrades, driver updates, OS releases - each one can resurface a bug class you thought you'd fixed because the underlying behavior changed slightly. Regression tests catch the obvious ones; player reports catch the rest.

When triaging a similar issue in production, prioritize gathering data over hypothesizing causes. A player report describes a symptom; what you need is a build SHA, a session timestamp, and ideally a screen recording or session replay. With those, the bug becomes tractable. Without them, you're guessing at hypothetical reproductions that may not match what the player actually hit.

Performance considerations

Performance implications matter when this bug class scales with player count or asset count. A bug that fires once per session is annoying; a bug that fires once per frame compounds. After fixing, profile the affected code path under realistic load. The fix that's correct for one entity may be too slow for ten thousand.

Diagnostic approach

Before applying any fix, gather enough context to be confident you're addressing the actual cause and not a similar-looking symptom. The cheapest diagnostic step is reproducing the bug deterministically - if you can't get the same failure twice in a row, your fix attempts will be hard to evaluate. Lock down the reproduction first.

For Construct 3-specific diagnostics, the editor's profiler is the canonical starting point. Capture a representative frame with the symptom present; compare against a frame without the symptom; the diff often points directly at the cause. If the symptom is non-deterministic, capture multiple frames and look for the pattern - the cause is usually a state transition or a specific input value rather than a continuous effect.

Tooling and ecosystem

Modern engine versions ship better tooling for this kind of issue than older versions. If you're on an older release, the diagnostic step may take significantly longer because the tools you'd want don't exist yet. Sometimes the right answer is upgrading rather than fighting through limited tooling.

Within Construct 3, the relevant diagnostic surfaces include the standard frame debugger, memory profiler, and engine-specific debug overlays. Each one shows a different facet of what's happening. The frame debugger reveals draw call ordering and state transitions; the memory profiler shows allocation patterns; the debug overlay reveals per-system state. Bugs that resist one tool usually surrender to another - the trick is knowing which tool to reach for first.

Edge cases and pitfalls

Platform-specific edge cases are worth enumerating explicitly. iOS handles backgrounding differently than Android; Windows handles focus changes differently than macOS. A fix that works on the development platform may not work on every target. Test on each shipping platform deliberately.

When writing a regression test for this fix, focus on the boundary conditions that surfaced the original bug. Tests that exercise the happy path catch obvious regressions; tests that exercise the boundary catch the subtler regressions that look like new bugs but are really the original returning. The latter are the tests that earn their keep over the long life of the project.

Team communication

When this bug class affects multiple teams (often the case for cross-system issues), early communication prevents duplicate work. The team that owns the symptom may not own the cause. A 15-minute conversation at the start of triage often saves hours of independent investigation.

If this fix touches a system several engineers work in, a short writeup in the team's engineering channel helps. Not a full design doc - a paragraph explaining what was wrong, what's fixed, and what to watch for. Future engineers encountering similar symptoms will search for the fix; making it findable is a small investment that pays back later.

“Touch over Mouse, viewport over default, touch-action: none over the OS. Three knobs to turn for responsive web games on mobile.”

Test on real Android devices early — emulator touch latency doesn’t match real device latency.