demo · v146

Draggable region tester

In unframed (a.k.a. borderless) mode the OS title bar disappears. The page becomes responsible for declaring which regions are "drag handles" via the app-region CSS property. Toggle between framed and unframed, hover the mock window, and watch the cursor and pointer events change.

PWA only: the unframed display mode is only available to installed PWAs whose manifest sets "display_override": ["window-controls-overlay", "borderless"]. This page renders a mock so you can compare the behaviour without installing.

display mode

drag any area marked app-region: drag; buttons and inputs opt out via app-region: no-drag.

App — Untitled

Window content. In framed mode the OS title bar handles the drag.

/* Unframed manifest: */
{
  "display": "standalone",
  "display_override": ["borderless"]
}

/* App bar opts in to being a drag handle: */
.app-bar  { app-region: drag; }
.app-bar  button,
.app-bar  input { app-region: no-drag; }

see also