A floating action button occludes content underneath
Aliases: FAB · floating action button · occluded content
What it is
A floating action button (FAB) sits above the content layer and out of document flow. It therefore always covers a patch: the last list row, a card’s secondary action, a map pin, the last chat bubble. Occlusion is not an edge case. It is the geometry of the control—while it floats, some content cannot be seen or cannot be hit.
Why it happens
The floating layer and the content layer compete for the same screen rectangle. As a list scrolls, rows pass under the FAB; if a row has favorite, delete, or a checkbox, hit-testing reaches the FAB first. The user may still see the row’s edge; the finger still hits the primary. A bottom bar, gesture inset, and safe area then push the FAB up, turning a corner into a horizontal band that permanently covers the last rows. People invent workarounds: scroll a little more, switch hands, abandon the occluded object. Those strategies spend time that belonged to the content. The FAB’s value is a primary trigger in the thumb’s easy zone; its cost is that content in that zone must always yield.
Studying it
Run scrolling and hit tests: with and without a FAB on the same list, complete “open the last item” and “hit the last row’s secondary action.” Log occluded row count, accidental FAB activations, extra distance scrolled to reveal the target.
Independent variables: FAB size and margin, whether rows have inline actions, presence of a bottom bar. Dependent variables: visible content area, misactivation rate, extra scrolling, utterances of “it’s in the way.”
A still screenshot underestimates occlusion because people can scroll. Measure in motion: the click when the target is passing under the FAB is the field accident.
Where it stops holding
On an empty state or a short page with nothing tappable under the FAB, occlusion barely costs function. On landscape or a large foldable the FAB’s area share drops. Map products sometimes accept covering part of the map in exchange for always-available add; if the occluded object is the currently selected pin, the cost returns. Desktop rarely uses a FAB; avoid the occlusion with a toolbar rather than scaling the mobile FAB up.
Applying it
- Give lists, chats, and maps bottom padding so the last item can scroll into the gap above the FAB.
- Do not put inline secondary actions in the lower-right column that the FAB covers; move them to the opposite side or into overflow.
- When a bottom bar exists, notch the FAB into the bar rather than stacking another circle between bar and content.
- Verify by scrolling to the last item and trying to hit it and its inline actions. Hitting the FAB, or having to push content out of view to reach it, is occlusion failure.