Skip to content

Prevent bottom of page from being swipable #73

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

Open
Coteh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Prevent bottom of page from being swipable #73

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 src/styles/components/swipe.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
top: 25vh;
opacity: 0;
width: 100%;
height: 75vh;
bottom: max(env(safe-area-inset-bottom), 50px);

@coderabbitai coderabbitai Bot Mar 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

What is current support (including Android WebView) for CSS env(safe-area-inset-bottom)and CSSmax()in property values, and are there known parsing/fallback caveats when combined asmax(env(...), 50px)?

💡 Result:

Support (as of March 2026)

env(safe-area-inset-bottom)

  • Android WebView: supported since WebView 69 (Chromium 69). [2]
  • Chrome / Chrome Android: supported since Chrome 69. [1]
  • Safari / iOS Safari: introduced around Safari 11–11.1 (with older “partial” history on Safari 11). [1][2]
  • Firefox (desktop/Android): supported since Firefox 65. [1][2]

Notes:

  • On Android, safe-area insets are only meaningful when the embedding app/windowing mode provides insets; Android’s guidance confirms WebView forwards insets to CSS safe-area env vars. [3]

max() in CSS property values (CSS math function)

  • Android WebView: supported starting Chromium/WebView 79 (because min()/max()/clamp() land in Chromium 79). [4]
  • Chrome / Edge: supported since 79. [4]
  • Firefox: supported since 75. [4]
  • Safari: supported from 13.1 (earlier versions show partial/none). [4]

Caveats when using max(env(...), 50px)

  1. If max() isn’t supported, the whole declaration is invalid (dropped).
    This is the big practical issue on older Safari / older Chromium/WebView. Use a fallback declaration before it, or gate with @supports. [4][5]

    Example pattern:

    padding-bottom: 50px; /* fallback */
padding-bottom: max(env(safe-area-inset-bottom, 0px), 50px);

  2. If env() is supported but the variable is unknown/invalid at computed-value time, behavior can “snap” to initial/inherited (not “ignore the declaration”).
    MDN notes env() is accepted at parse time, but validity is checked after substitution; if invalid and no valid fallback is provided, you can end up with the property’s initial/inherited value. [5]
    Mitigation: always include a valid fallback inside env(…, <fallback>).

  3. Android edge-to-edge: using env(safe-area-inset-bottom) in padding on bottom-fixed UI can cause performance/layout issues.
    Chrome’s Android edge-to-edge guidance explicitly warns that patterns like padding-bottom: env(safe-area-inset-bottom, …) on bottom-anchored elements can cause “layout thrashing” (and can affect how the browser UI animates). They recommend alternative patterns using safe-area-max-inset-bottom + calc() for performant animation with the “chin” behavior. [6]

In short: today, max(env(safe-area-inset-bottom, 0px), 50px) is fine on modern engines (Chromium/WebView ≥79, Safari ≥13.1, Firefox ≥75), but you still want a plain fallback declaration for older browsers, and on Android edge-to-edge you should be careful about using the dynamic inset in padding on bottom-fixed UI. [4][6]

Sources:
[1] Can I use: CSS env() function https://caniuse.com/css-env-function
[2] BCD feature: css.types.env.safe-area-inset-bottom (includes WebView Android 69) https://bcd-training.deno.dev/feature?id=css.types.env.safe-area-inset-bottom
[3] Android Developers: “Understand window insets in WebView” https://developer.android.com/develop/ui/views/layout/webapps/understand-window-insets
[4] Can I use: CSS math functions min/max/clamp https://caniuse.com/css-math-functions%2Ccss-variables
[5] MDN: env() parsing/computed-value behavior https://developer.mozilla.org/en-US/docs/Web/CSS/env
[6] Chrome Developers: Android edge-to-edge + safe-area inset guidance https://developer.chrome.com/docs/css-ui/edge-to-edge

🏁 Script executed:

cat -n src/styles/components/swipe.css | head -15

Repository: Coteh/2048-clone

Length of output: 440

Add a CSS fallback for max() function support and explicit env() fallback parameter.

Line 6 uses max(env(safe-area-inset-bottom), 50px), but max() support only landed in WebView 79+, Chrome 79+, Firefox 75+, and Safari 13.1+. On older browsers, the entire declaration is dropped, leaving the swipe area without explicit bottom positioning. Add a plain fallback declaration before the advanced rule, and ensure env() includes an explicit fallback parameter.

Proposed CSS fix 
 .swipe-area {
     position: absolute;
     top: 25vh;
     opacity: 0;
     width: 100%;
+    bottom: 50px;
-    bottom: max(env(safe-area-inset-bottom), 50px);
+    bottom: max(env(safe-area-inset-bottom, 0px), 50px);
     background-color: lightgray;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
bottom: max(env(safe-area-inset-bottom), 50px);
.swipe-area {
position: absolute;
top: 25vh;
opacity: 0;
width: 100%;
bottom: 50px;
bottom: max(env(safe-area-inset-bottom, 0px), 50px);
background-color: lightgray;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/styles/components/swipe.css` at line 6, Add a plain fallback bottom
before the current max() rule and add an explicit fallback to env();
specifically, add a simple "bottom: 50px;" declaration immediately before the
existing "bottom: max(env(safe-area-inset-bottom), 50px)" and change the env()
call to include a fallback like "env(safe-area-inset-bottom, 0px)" so the final
advanced rule becomes "bottom: max(env(safe-area-inset-bottom, 0px), 50px)";
this ensures older browsers use 50px and browsers that support env()/max() apply
the safe-area inset.

background-color: lightgray;
display: flex;
justify-content: center;
Expand Down
Loading