demo · v151

No-drag Event Probe

The failure mode the web.dev guide flags: drag regions swallow pointer events. A button inside a drag region never sees its click. This page proves it — click the buttons in each zone, watch the event log fill (or not).

Standalone PWA only: window-drag only activates in an installed PWA window. In a regular tab the drag intent doesn't move anything — but the pointer-event swallowing in drag regions still happens, which is exactly what this probe demonstrates.
checking CSS.supports('window-drag', 'drag')…

the mock pwa

my-pwa · drag titlebar

drag region

window-drag: drag. The button inside is also drag — its clicks are absorbed by the window-move intent.

no-drag region

window-drag: no-drag. Inside a draggable shell but opted out — pointer events flow as normal.

event log
clicks landed: 0 clicks lost to drag: 0 drag intents fired: 0

what the css does

/* Titlebar grabs drag intent for the whole strip. */
.titlebar { window-drag: drag; }

/* But this button inside the titlebar still needs to be clickable. */
.titlebar .pin { window-drag: no-drag; }

/* In the body, a panel that's draggable swallows interactive content
   unless those children opt back out. */
.drag-panel             { window-drag: drag; }
.drag-panel .toolbar    { window-drag: no-drag; }
.drag-panel .toolbar btn{ /* clicks work — toolbar is no-drag */ }

the spec note that matters

From the web.dev guide on Window Controls Overlay: "Draggable areas ignore all pointer events. For example, a button element that overlaps a draggable region will not emit mouse clicks or mouse enter/exit events within that overlapping area." If you have a custom titlebar with interactive controls, every one of them needs its own window-drag: no-drag.

Chrome 151 ships window-drag as the standardised spelling, with -webkit-app-region and the in-flight app-region kept as aliases so Electron and existing PWAs keep working unchanged.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗