F2.12.2no tappables in the home-indicator banddesign

Do not put tappables in the home-indicator band

Aliases: home indicator · bottom gesture bar · inset-bottom

What it is

The home-indicator strip is where the system swipe-goes-home. Park “Agree and continue” 8 px from the physical bottom and taps compete with that gesture, or become a trip to the desktop. Carousel page dots in the same band are equally unhittable. This is not visibility — the button may paint whole — it is not reliably tappable, or a tap that fires the OS.

Conflict between a fixed tab bar and system gestures is a placement claim elsewhere. This leaf covers any tappable: the last button in a scrolling list, a full-width CTA, page dots. If it sits in the indicator band, layout has to lift it into the safe area.

Why it happens

The bottom ~34 pt (device-dependent) is a system gesture arena; the OS wins. Hit-testing and recognizers swallow an upward swipe. A short tap sometimes reaches your button; a tap with a little movement goes home. Thumbs also rest there, so accidental activation is already high.

The bottom safe-area inset raises the floor of tappable layout above that band. Content may still scroll through the band (the last list row coming up); parked tappables at rest must not live in it.

Where it stops holding

Non-tappable brand fill, or a decorative footer, may enter the band. Games that put a virtual stick on the bottom edge are fighting the system gesture on purpose and must follow the platform’s exclusive-fullscreen rules, not ordinary app layout. Older devices with a hardware Home key have no band; bottom inset is near 0. The same absolute 34 px will be wrong across devices — read the inset, do not hard-code it.

In landscape the indicator still sits on the “bottom” short edge; the forbidden band rotates with it.

Applying it

  • Primary buttons, tab bars, page dots, row actions: align their bottom to the safe-area inset, not to the screen bottom.
  • Scrolling content may enter the band; snap targets that end there (paged sheets, sticky CTAs) must lift the target out of the band.
  • How to check: paint the bottom inset as a block. Any tappable that intersects the block fails. On device, tap that button ten times quickly; count system-gesture captures. Above zero, move the button up until ten taps stay in the app. Repeat in landscape; the band moved.

Related

  • Same group: F2.12.1 Notch and corner radius clip what you park in the corners · F2.12.3 Backgrounds may paint past the safe area; content may not
  • Nearby: F1.12 Fixed chrome and safe area · F1.04 Thumb hot zones · F2.13 Portrait and landscape
  • Search terms: home indicator · safe-area-inset-bottom · system gesture · bottom inset

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F2.12.2