Skip to content

Support iOS safe area insets #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MSicc merged 1 commit into from
Mar 8, 2026
Merged

Support iOS safe area insets #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="author" content="{{ site.author }}">
<meta name="theme-color" content="#0f172a">

Expand Down
5 changes: 4 additions & 1 deletion assets/css/site.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

html {
scroll-behavior: smooth;
background: linear-gradient(180deg, #f5f8fb 0%, #ebf1f7 100%);
}
Comment on lines 26 to 29
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll-behavior: smooth combined with a sticky header means in-page #section navigation can land with the target content hidden under the header. Since the header height now varies with env(safe-area-inset-top), consider adding scroll-padding-top on html (or scroll-margin-top on section anchors) using the header height + safe-area inset so hash-link navigation consistently positions content below the header.

Copilot uses AI. Check for mistakes.

@media (prefers-reduced-motion: reduce) {
Expand All @@ -43,6 +44,7 @@ html {

body {
margin: 0;
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

min-height: 100svh has no effect in browsers that don’t support the newer viewport units, which can regress full-viewport layout/background coverage. Consider adding a min-height: 100vh fallback before 100svh so older Safari/Chromium versions still get a sensible minimum height.

Suggested change
margin: 0;
margin: 0;
min-height: 100vh;

Copilot uses AI. Check for mistakes.
min-height: 100svh;
font-family: "Source Sans 3", sans-serif;
color: var(--text);
background:
Expand Down Expand Up @@ -70,6 +72,7 @@ img {
position: sticky;
top: 0;
z-index: 20;
padding-top: env(safe-area-inset-top);
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only the top safe-area inset is applied here. In iPhone landscape, safe-area-inset-left/right can be non-zero and the header’s inner content (via --shell = 100vw - 2rem) can still extend into the unsafe region. Consider also applying left/right safe-area padding (e.g., padding-inline) to the header (or adjusting the shell calculation) so navigation/brand content stays fully within the safe area.

Suggested change
padding-top: env(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);

Copilot uses AI. Check for mistakes.
backdrop-filter: blur(18px);
background: linear-gradient(180deg, rgba(18, 31, 49, 0.94), rgba(12, 22, 37, 0.9));
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
Expand Down Expand Up @@ -526,7 +529,7 @@ h1 {
}

.site-footer {
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need to support older iOS Safari versions, env(safe-area-inset-*) may require a constant(safe-area-inset-*) fallback to work. Consider adding the constant() form before env() for both the header and footer safe-area padding declarations.

Suggested change
.site-footer {
.site-footer {
padding: 2rem 0 calc(3rem + constant(safe-area-inset-bottom));

Copilot uses AI. Check for mistakes.
padding: 2rem 0 3rem;
padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom));
}

.site-footer__inner {
Expand Down