fix(mobile): let the keyboard shrink the page on Android browsers
The pre-dvh -webkit-fill-available viewport fix freezes Android Chrome's root at the pre-keyboard height; when interactive-widget=resizes-content shrinks the viewport, the document stays taller than the screen and the clipped composer hides behind the keyboard with no way to scroll to it. dvh-capable browsers now take a dynamic 100dvh instead, and the legacy fallback keeps serving browsers without dvh.
This commit is contained in:
@@ -142,6 +142,23 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* -webkit-fill-available above is a pre-dvh iOS Safari fix. On Android
|
||||||
|
Chrome it freezes the root at the pre-keyboard height: when
|
||||||
|
interactive-widget=resizes-content shrinks the viewport, the document
|
||||||
|
stays taller than the screen and (with overflow hidden) the composer's
|
||||||
|
bottom is clipped behind the keyboard with no way to scroll to it.
|
||||||
|
Every dvh-capable browser gets the dynamic height instead; the legacy
|
||||||
|
fallback above keeps serving browsers without dvh. */
|
||||||
|
@supports (height: 100dvh) {
|
||||||
|
:root.mobile-pointer:not(.desktop-runtime) {
|
||||||
|
height: 100dvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||||||
|
height: 100dvh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Fix main content area */
|
/* Fix main content area */
|
||||||
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@@ -216,6 +233,16 @@
|
|||||||
min-height: -webkit-fill-available;
|
min-height: -webkit-fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Same Android-keyboard clipping fix as above: dvh-capable browsers
|
||||||
|
must not keep a frozen -webkit-fill-available minimum. */
|
||||||
|
@supports (min-height: 100dvh) {
|
||||||
|
:root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen,
|
||||||
|
:root.device-tablet:not(.desktop-runtime) .flex.flex-col.h-screen,
|
||||||
|
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||||||
|
min-height: 100dvh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Prevent content overlap in iOS */
|
/* Prevent content overlap in iOS */
|
||||||
:root.device-mobile:not(.desktop-runtime) .flex-1.overflow-hidden,
|
:root.device-mobile:not(.desktop-runtime) .flex-1.overflow-hidden,
|
||||||
:root.device-tablet:not(.desktop-runtime) .flex-1.overflow-hidden,
|
:root.device-tablet:not(.desktop-runtime) .flex-1.overflow-hidden,
|
||||||
|
|||||||
Reference in New Issue
Block a user