fix(mobile): lock viewport, disable iOS bounce, fix 100vh reflow
Build & Push Docker Images / test-backend (push) Successful in 20s
Build & Push Docker Images / test-frontend (push) Successful in 22s
Build & Push Docker Images / build-backend (push) Successful in 17s
Build & Push Docker Images / build-frontend (push) Successful in 27s
Build & Push Docker Images / test-backend (push) Successful in 20s
Build & Push Docker Images / test-frontend (push) Successful in 22s
Build & Push Docker Images / build-backend (push) Successful in 17s
Build & Push Docker Images / build-frontend (push) Successful in 27s
Root cause: html/body had no height/overflow constraint, so the webview allowed rubber-band overscroll. .app used min-height: 100vh which on iOS resolves to the larger viewport (behind URL bar), causing layout to reflow when the bar collapses. - index.css: html/body locked to 100% height, overflow hidden, overscroll-behavior none; #root set to exact 100dvh - App.css: .app height: 100dvh (was min-height: 100vh) with overflow-y: auto + overscroll-behavior: contain so the .app becomes the scroll container - capacitor.config.json: ios.bounces false, contentInset never Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,8 @@
|
||||
"androidScheme": "https"
|
||||
},
|
||||
"ios": {
|
||||
"contentInset": "always"
|
||||
"contentInset": "never",
|
||||
"bounces": false
|
||||
},
|
||||
"android": {
|
||||
"allowMixedContent": false
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 3rem 1.5rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
+7
-11
@@ -34,15 +34,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
html {
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Outfit', system-ui, sans-serif;
|
||||
color: var(--text-main);
|
||||
@@ -53,13 +52,10 @@ body {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
min-height: 100svh;
|
||||
min-height: 100dvh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100svh;
|
||||
min-height: 100dvh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user