Skip to content

iOS Safari: empty band between the phone toolbar and Safari's bottom bar #391

Description

@JDProfresh

What happens

On an iPhone in Safari, with the phone layout active, there is an empty band roughly 40 CSS px tall between the bottom toolbar (Run / Enter / mic) and Safari's bottom bar whenever the bar is expanded. The terminal is padded by the same amount, so the band is dead space below the last prompt line. It closes when the bar collapses on scroll and reopens when it expands.

Why

mobile.css lifts the toolbar on iOS Safari by calc(var(--safe-area-bottom) + (100vh - var(--app-height))) and pads .main by the same amount, on the assumption that position: fixed anchors to a layout viewport that extends behind the browser bar. On iPhone Safari fixed elements already stop above the bar. 100vh is the large viewport (bar collapsed) and --app-height is visualViewport.height (bar expanded), so the expression measures the bar's collapsible height, and that is the band.

Environment

Proposed fix

Lift by the measured overlap instead: set a --chrome-overlap variable in updateAppHeight() as innerHeight - visualViewport.height (0 where fixed elements already clear the bar, the overlap where they do not) and use it in the two rules in place of 100vh - --app-height. PR to follow.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions