v149 · UI · demo

Native UX Demo

Toggle between web-overridden and platform-provided behaviors for four native OS interactions. See which CSS properties control each behavior and how the platform behaves when you get out of the way.

1. Overscroll bounce iOS rubber-band / Android glow

Scroll to the end of this box and keep scrolling. In platform mode, iOS shows a bounce, Android shows a glow. In web mode, overscroll-behavior: contain clips the overscroll to this element only.

Line 1 — scroll down
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10 — keep scrolling past here
Line 11
Line 12 — end of content

overscroll-behavior: auto /* platform provided */

2. Scroll chaining nested scroll propagation

Scroll the inner box to its end. In platform mode the scroll chains to the outer container. With web override, overscroll-behavior: contain on the outer prevents chaining.

Inner content 1
Inner content 2
Inner content 3
Inner content 4
Inner content 5
Inner content 6

Outer row A

Outer row B

Outer row C

Outer row D

Outer row E

Outer row F

outer: overscroll-behavior: auto /* allows chaining */

3. Touch callout iOS long-press popup

Long-press (or right-click) the box below. On iOS in platform mode, the native callout popup appears. Web override sets -webkit-touch-callout: none to suppress it.

Long-press or right-click me — native callout in platform mode

-webkit-touch-callout: default /* iOS native callout shown */

4. Tap highlight native tap color

Tap or click the target. Platform mode shows the OS accent tap highlight flash. Web override sets -webkit-tap-highlight-color: transparent to suppress it.

Tap or click me — watch for highlight flash

-webkit-tap-highlight-color: rgba(0, 34, 255, 0.2) /* platform accent */

/* Platform-provided: let the OS handle it */
.scroll-area {
  overscroll-behavior: auto;           /* bounce / glow */
}

/* Web-controlled: suppress OS behavior */
.scroll-area {
  overscroll-behavior: contain;        /* no bounce, no chain */
}

/* Scroll chaining prevention */
.modal-scroll {
  overscroll-behavior: contain;        /* scroll stops here */
}

/* iOS touch callout (long-press menu) */
.no-callout { -webkit-touch-callout: none; }    /* suppress */
.callout    { -webkit-touch-callout: default; } /* platform */

/* Tap flash highlight */
.no-tap-hl  { -webkit-tap-highlight-color: transparent; }
.tap-hl     { -webkit-tap-highlight-color: rgba(0,34,255,0.2); }

implementation reference

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

see also

implementation reference