[csswg-drafts] Consider adding new CSS primitive for per-element panning and zooming (for web maps) (#5275)

zcorpan has just created a new issue for https://github.com/w3c/csswg-drafts:

== Consider adding new CSS primitive for per-element panning and zooming (for web maps) ==
See https://github.com/Maps4HTML/MapML/issues/71

The [Maps for HTML Community Group](https://maps4html.org/) explores ways to make web maps a first-class feature on the web platform. Styling with CSS is desired, but is not yet fleshed out how it would work.

From what I can tell, web maps commonly use an interaction model that the web doesn't support natively: panning and zooming a single element.

Panning is similar to scrolling, but not quite. Scrolling areas have edges. Panning a web map can wrap around the edges. On desktop, panning a web map is typically done by a drag and drop gesture, and zooming is done by scrolling gesture. On touch-based devices, panning is typically done by swipe gesture with one or two fingers, and zooming by pinch gesture.

While browsers support [“page zoom” and “pinch zoom”](https://www.w3.org/TR/cssom-view-1/#zooming), there is no per-element zooming primitive.

Currently, JS-based implementations of web maps solve this by using touch events and preventing the default action (such as page scrolling and pinch zooming). For example, [leaflet.js calls `stopPropagation()` for `mousewheel` events](https://github.com/Leaflet/Leaflet/blob/983092a4975e5a4ab74e8665b38e31a17f38ddb5/src/control/Control.Layers.js#L183).

Instead of web maps having to hijack events and implement a custom interaction model, I wonder if this could be supported as a first-class feature that you can opt into. This could have various benefits:

* improved performance
  - the UA could perform panning and zooming in the composition thread, like scrolling. Today's JS-based solutions that respond to events will lag behind with a tick of the event loop, and are subject to jank if another task occupies the main thread.
  - with the implementation being part of the UA, the amount of necessary JS is reduced, which lowers network transfer sizes and JS compilation time.
* support for different/new device form factors: similar to `<video controls>` or `<select>`, the UA can adapt the experience to make sense for new device form factors (desktop vs phone vs watch vs in-car navigation system).
* accessibility: a first-class interaction model on the web should be usable for everyone, including when using assistive technologies. I don't know what the current situation is like or what the challenges are. But custom JS-based implementations might neglect this aspect, potentially leaving web maps inaccessible.
* better web developer ergonomics

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5275 using your GitHub account

Received on Wednesday, 1 July 2020 11:49:53 UTC