fix: remove will-change from nav-bottom and add iOS height fallback
will-change: transform on a position:relative flex child causes iOS WebKit to composite the element at an incorrect position - creating a visible gap below the nav bar. Remove it; CSS transform transitions use hardware acceleration automatically on modern iOS without this hint. Add -webkit-fill-available before 100dvh on .app-shell as a fallback for iOS WebKit versions where 100dvh is computed slightly smaller than the actual WKWebView height.
This commit is contained in:
@@ -349,7 +349,8 @@ textarea.form-input {
|
||||
transform var(--transition-base) var(--ease-out),
|
||||
background-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
will-change: transform;
|
||||
/* will-change: transform absichtlich weggelassen - auf iOS (WebKit) korrumpiert die
|
||||
* dauerhafte GPU-Layer-Promotion eines position:relative Flex-Kinds dessen Position. */
|
||||
}
|
||||
|
||||
.nav-bottom--hidden {
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
.app-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* -webkit-fill-available als iOS-Fallback: In manchen iOS-WebKit-Versionen
|
||||
* ist 100dvh minimal kleiner als die tatsächliche WKWebView-Höhe, was zu einem
|
||||
* sichtbaren Streifen unten führt. -webkit-fill-available füllt zuverlässig. */
|
||||
height: -webkit-fill-available;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user