Skip to content

Viewport Height Issue on Mac (Safari) #34

@alexdeploy

Description

@alexdeploy

Description

The page's viewport height is not displaying correctly on Safari (Mac). After investigating, I found that the #nuxt element has height: 100%, which works fine in Chrome but not in Safari. If this property is disabled in Chrome, the height matches what is seen in Safari.

Image

Steps to Reproduce

Open the application in Safari on Mac.
Compare the viewport height with how it appears in Chrome.
In Chrome, disable the height: 100% property of #nuxt in DevTools.
The height in Chrome will then match Safari’s height.

Expected Behavior

The viewport height should be consistent across browsers, particularly between Chrome and Safari.

Actual Behavior

On Safari (Mac), the viewport height is shorter than expected.
On Chrome, the height appears as intended, but disabling height: 100% on #nuxt causes it to match Safari’s behavior.
Possible Fix

Further investigation is needed to determine a cross-browser solution, possibly using min-height: 100vh or other CSS techniques that ensure consistency.

Environment

Browser: Safari (Mac)
OS: macOS Sequoia

Would appreciate any insights or fixes on this issue! 🚀

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions