How to Adapt Fixed Elements for iPhone X’s Home Indicator Using CSS

Introduction

iPhone X replaces the physical home button with a bottom Home Indicator, causing layout issues for web pages that use position:fixed elements anchored to the bottom (e.g., sticky navigation bars, back‑to‑top buttons).

Key Concepts

Safe Area

The safe area is the portion of the viewport not obscured by rounded corners, the notch, or the Home Indicator. Content placed inside this area remains fully visible.

viewport‑fit

iOS 11 adds the viewport-fit descriptor to the meta viewport tag. The three possible values are:

contain – the viewport fully contains the page content.

cover – the page content covers the entire viewport (required for iPhone X adaptation).

auto – default, behaves like contain.

By default browsers behave as viewport-fit=contain . To adapt for iPhone X you must set viewport-fit=cover .

constant() / env() function

WebKit provides the CSS function constant() (to be replaced by env()) with predefined variables such as safe-area-inset-bottom, which reports the height of the Home Indicator (different in portrait and landscape). The function only works when viewport-fit=cover; browsers that do not support it ignore the call.

Adaptation Steps

Step 1 – Enable viewport‑fit=cover

<meta name="viewport" content="width=device-width, viewport-fit=cover">

This makes the page content extend to the full window and enables the constant() values.

Step 2 – Constrain main content to the safe area

body {</code>
<code>  padding-bottom: constant(safe-area-inset-bottom);</code>
<code>}

Adding bottom padding prevents content from being hidden behind the Home Indicator.

Step 3 – Adapt fixed elements

Type 1: Fully bottom‑anchored elements ( bottom: 0 )

Extend height with padding:

{</code>
<code>  padding-bottom: constant(safe-area-inset-bottom);</code>
<code>}

Increase height with calc():

{</code>
<code>  height: calc(60px + constant(safe-area-inset-bottom));</code>
<code>}

Requires the element to have a background color; otherwise the added space will be transparent.

Insert a placeholder element that occupies the Home Indicator height and keep the original element’s height unchanged:

{</code>
<code>  margin-bottom: constant(safe-area-inset-bottom);</code>
<code>}

Placeholder CSS:

{</code>
<code>  position: fixed;</code>
<code>  bottom: 0;</code>
<code>  width: 100%;</code>
<code>  height: constant(safe-area-inset-bottom);</code>
<code>  background-color: #fff;</code>
<code>}

Type 2: Partially bottom‑anchored elements ( bottom ≠ 0) – e.g., back‑to‑top buttons, side ads

Adjust with margin:

{</code>
<code>  margin-bottom: constant(safe-area-inset-bottom);</code>
<code>}

Override the bottom value with calc():

{</code>
<code>  bottom: calc(50px + constant(safe-area-inset-bottom));</code>
<code>}

Conditional application with @supports

@supports (bottom: constant(safe-area-inset-bottom)) {</code>
<code>  .fixed-element {</code>
<code>    margin-bottom: constant(safe-area-inset-bottom);</code>
<code>  }</code>
<code>}

Summary

Applying viewport-fit=cover, using constant(safe-area-inset-bottom) (or env() when supported), and wrapping the rules in an @supports block ensures that bottom‑anchored fixed elements remain visible and usable on iPhone X and similar devices with a Home Indicator.