Why Web Gestures Need a Standard: Comparing Flutter, iOS, Android & hammer.js

"North Sea Kraken" is a Flutter‑based web rendering engine that aims to provide front‑end developers with capabilities defined by W3C standards, while also exploring new problems and features to improve web technology.

Early web pages were mainly content‑driven, generated by back‑end frameworks and enhanced with CSS and JavaScript. Modern web development has evolved far beyond simple content rendering; JavaScript now appears in virtually every domain, and web applications demand higher performance, richer interactions, and standardized APIs.

Gesture handling is one such capability that is currently missing from the web standard. Developers often rely on hammer.js or raw Touch events to simulate gesture events, which introduces usability, performance, and standardization issues.

Usability: Developers must manually implement or wrap higher‑level gestures, loading extra scripts and consuming additional resources.

Performance: JavaScript‑based solutions repeatedly bridge gesture data to the UI thread, increasing latency and blocking rendering.

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

Continuous vs. Discrete Gestures

A complete gesture consists of pointer down , optional pointer move , and pointer up . Continuous gestures (e.g., pan) expose intermediate states, while discrete gestures (e.g., click) only notify when the gesture finishes.

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

Gesture Implementations on Different Platforms

hammer.js (Web)

Pan – triggers frequently once a minimum distance and direction are met.

Swipe – triggers when distance and speed exceed thresholds.

Pinch – pinch‑out to zoom, pinch‑in to shrink.

Press – long press (default >250 ms).

Flutter

Tap, Double tap, Long press (≥500 ms)

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

Scale – combines pinch and rotation.

Pan – built on drag with additional state handling; only fires once per gesture.

iOS

Tap – discrete gesture (~100 ms).

Long Press – continuous gesture (≥500 ms).

Pan – continuous, tracks movement.

Swipe – discrete.

Pinch – continuous (zoom).

Rotation – continuous.

Android

Click and Touch methods directly on View.

OnDragListener – drag events.

OnLongClickListener – long‑press events.

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

GestureDetector.OnDoubleTapListener – double‑tap.

ScaleGestureDetector – pinch, rotate, scale.

All platforms implement similar core gestures (tap, swipe, pan, long press, pinch, rotation) but differ in API design, state granularity, and naming.

Currently, the W3C lacks a unified gesture specification. The authors have opened a discussion in the W3C Chinese Interest Group, proposing a UIEvent‑based approach that balances usability, performance, and standardization. The proposed standard is already implemented in the North Sea Kraken engine, offering enhanced gesture capabilities for complex interactive applications.