Why Web Gestures Need a New Standard: Lessons from Kraken, Flutter, iOS & Android

“北海 Kraken” is a Flutter‑based web rendering engine that follows W3C standards and aims to improve web technology through standard‑driven enhancements. Learn more at http://openkraken.com/.

Early web pages were mainly for content display, generated from backend frameworks with CSS and JavaScript for interaction. Modern web development has evolved far beyond simple content, with JavaScript pervasive across domains, demanding higher performance, usability, and standardization.

Gesture support is a notable gap in current web standards. Developers often rely on libraries like hammer.js or directly wrap Touch events, which introduces issues in usability, performance, and standardization.

Usability: Developers must manually implement or wrap higher‑level gestures, requiring extra resources and CDN loads.

Performance: JavaScript‑based solutions repeatedly bridge gesture data to the front end, increasing overhead and blocking the UI thread.

Standardization: Inconsistent implementations lead to divergent event behaviors across platforms, harming user experience.

Continuous Gestures and Discrete Gestures

Understanding the difference between continuous and discrete gestures helps developers assess impact on development, performance, and usability.

A complete gesture consists of pointer down, pointer move, and pointer up events. Some gestures omit the move phase (e.g., click, long press). The pointer abstraction enables future extensions for new input devices.

Continuous gestures: from pointer down through moves to up, providing state updates (e.g., pan).

Discrete gestures: trigger a single callback after the gesture completes (e.g., click).

element.addEventListener('pan', (gestureEvent) => {
  if (gestureEvent.state === 'up') {
    // do something...
  }
});

Implementing a continuous gesture like pan requires frequent state transmission via the bridge, incurring performance costs. Some frameworks split the gesture into panstart, panupdate, and panend to allow finer control, but this adds API complexity.

Gesture Systems Across Platforms

hammer.js

Pan – requires minimum distance and direction.

Swipe – based on distance and speed thresholds.

Pinch – zoom in/out.

Press – long press (default >250 ms).

hammer.js wraps Touch events in JavaScript, causing repeated bridge transfers and performance overhead. Ideally, such capabilities should reside in the rendering engine.

Flutter

Tap

Double tap

Long press (≥500 ms)

Vertical/Horizontal drag – triggers after minimum distance and speed.

Scale – combines pinch and rotation.

Pan – based on drag with speed and distance thresholds; fires only once per pointer sequence.

Flutter’s gestures are mostly continuous; even Tap is broken into TapDown and TapUp states, providing detailed callbacks but complicating standardization.

iOS

Tap – discrete (≈100 ms).

Long Press – continuous (≥500 ms).

Pan – continuous, direction‑aware.

Swipe – discrete.

Pinch – continuous zoom.

Rotation – continuous.

iOS supports multiple simultaneous touch pointers, allowing complex gestures like three‑finger swipe or two‑finger tap, with state‑based callbacks.

Android

View provides click and touch methods.

GestureDetector.OnGestureListener – includes onDown, onFling (swipe), onLongPress, onScroll, onShowPress, onSingleTapUp.

GestureDetector.OnDoubleTapListener – double‑tap.

ScaleGestureDetector – pinch, rotate, with begin, onScale, end callbacks.

Android’s gesture system is fine‑grained, similar to Flutter, but with many continuous gestures.

Standard

Analyzing Kraken, hammer.js, Flutter, iOS, and Android shows that all platforms implement a similar set of gestures (tap, swipe, pan, long press, pinch, rotation) with subtle differences. The web lacks a unified gesture specification.

With the proliferation of web runtimes (Web, React Native, mini‑programs, IoT, foldable devices), a standardized, performant, and easy‑to‑use gesture API is increasingly essential. The W3C currently has no dedicated gesture spec, but discussions are underway in the Chinese W3C interest group, referencing UIEvent.

The proposed standard has already been implemented in 北海 Kraken, offering enhanced gesture capabilities. Future work will define more complex scenarios and promote standardization to improve web technology.