Working with `safe-area-inset-bottom`

Modern mobile devices often have non-rectangular screen shapes, like notches or rounded corners. These can overlap with your website's content, especially fixed elements like footers.

The CSS environment variable safe-area-inset-bottom provides the size of the bottom safe area inset, allowing you to adjust your layout accordingly.

In some cases, browsers dynamically change the safe area insets as the viewport is extended into unsafe regions (e.g. hiding the browser bottom UI may allow the page to paint behind an OS application switching affordance).

Example

This example demonstrates both approaches combined with either sticky or fixed positioning. Use the dropdown to switch between them:

Approaches

There are two common ways to use safe-area-inset-bottom to prevent content from being obscured:

1. Using padding-bottom

Add padding to the bottom of your footer equal to the value of safe-area-inset-bottom:

This ensures that when positioned at the bottom of the screen, the content portion of the footer is visible, with the footer background painting behind the entire visible screen area to the bottom of the screen.

2. Using bottom

Set the bottom property of your footer to the value of safe-area-inset-bottom:

In order to avoid seeing the page background as the footer slides up, the natural solution is to oversize the footer by the maximum safe area inset.

3. Choice of sticky or fixed positioning

Sticky positioning ensures that the footer never obscures the content. However, when combined with oversizing the footer can result in undesirable extra blank space at the bottom of the document.

Fixed positioning ensures that the footer is always at the bottom, and that any extra reserved space is never in the content area, however if the developer isn't careful content can be hidden by the footer.

Performance vs ergonomics

The padding approach with position: sticky is easier to use and ensures that content is never obscured, however updating the padding requires a main thread style and layout update to change which can result in visible jitter while scrolling.

The bottom position constraints lends itself to beind composited as it is purely a visual shift, however it requires knowing the maximum size of the element and exposes the extra space when used with sticky positioning.