iOS 26 Safari will not render position: fixed content below the browser controls

Question

Created 1d

Replies 2

Boosts 5

Participants 3

Bug Report: Safari refuses to render content that is position: fixed or position: sticky if it goes below the iOS 26 navigation controls at the bottom of the browser. Since the controls are transparent and floating, this is a problem as fixed content is effectively unable to reach the bottom of the page. Attempting to move it below 100vh causes it to be cut off rather than rendering behind the navigation elements.

Here is some code reproducing the issue:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #363636;
        }

        #just-a-bird {
            position: fixed;
            bottom: -100px;
            width: 300px;
            height: auto;
            background: red;
        }
    </style>
</head>

<body>
    <img id="just-a-bird"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Cattle_tyrant_%28Machetornis_rixosa%29_on_Capybara.jpg/640px-Cattle_tyrant_%28Machetornis_rixosa%29_on_Capybara.jpg">
</body>

</html>

Boost

Answer 1

bearstack OP

10h

This is also important for example for a background blur when there is a loading indicator.

1

Answer 2

StuBD OP

6h

Woken up this morning to a similar issue.

Because our site doesnt have the bar floating over the top of the bottom content our users are complaining about reduced real estate on smaller devices (especially SE2020, which is used in the field a lot)

This is especially noticable when the Tab setting is Bottom or Top, rather than Compact.

Bottom and top take large chunks of the useable screen away from the user now that the site doesnt scroll behind them

0