Use body scroll and full-height composer on all touch devices

Maybe a big hammer, but fixes issues on iPad
This commit is contained in:
Penar Musaraj 2024-12-12 09:21:04 -05:00
parent 4f77903e60
commit d6ed5e498b
5 changed files with 46 additions and 31 deletions

View File

@ -141,7 +141,7 @@ export default class DVirtualHeight extends Component {
// we have to do this because we're positioning the composer with
// position: fixed and top: 0 and scrolling would move the composer halfway out of the viewport
// we can't use bottom: 0, it is very unreliable with keyboard visible
if (docEl.classList.contains("composer-open") && !this.capabilities.isIpadOS) {
if (docEl.classList.contains("composer-open")) {
disableBodyScroll(document.querySelector("#reply-control"));
}
}

View File

@ -39,10 +39,34 @@ html.composer-open.not-mobile-device {
}
z-index: z("composer", "content");
transition: height 250ms ease, background 250ms ease, transform 250ms ease,
max-width 250ms ease, padding-bottom 250ms ease;
max-width 250ms ease, padding-bottom 250ms ease, bottom 250ms ease;
background-color: var(--secondary);
box-shadow: var(--shadow-composer);
.touch & {
// We override values set in base/compose.scss so that on mobile/tablet, the composer is top-anchored.
// This is not ideal, but it is much better than bottom-anchoring.
// Safari in iOS/iPad and Firefox/Android do not handle well a bottom/fixed-positioned element,
// especially while the software keyboard is visible.
top: 0;
height: 100%;
z-index: -1;
max-height: unset;
min-height: unset;
visibility: hidden;
&.open,
&.fullscreen {
visibility: visible;
z-index: z("ipad-header-nav") + 1;
height: calc(var(--composer-vh, 1vh) * 100);
}
.grippie,
.toggle-fullscreen {
display: none;
}
}
.reply-area {
display: flex;
flex-direction: column;
@ -96,6 +120,14 @@ html.composer-open.not-mobile-device {
}
}
.touch &.draft,
.touch &.saving {
top: auto;
z-index: z("ipad-header-nav") + 1;
padding-bottom: env(safe-area-inset-bottom);
visibility: visible;
}
&.draft {
cursor: pointer;
display: flex;

View File

@ -42,12 +42,11 @@
.with-topic-progress {
position: sticky;
bottom: 0px;
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
z-index: z("timeline");
}
#topic-progress-wrapper {
padding-bottom: env(safe-area-inset-bottom);
&.docked {
.toggle-admin-menu {
display: none;

View File

@ -20,7 +20,10 @@ html.footer-nav-visible {
}
.with-topic-progress {
bottom: var(--footer-nav-height);
bottom: calc(
var(--footer-nav-height) + env(safe-area-inset-bottom) +
var(--composer-height, 0px)
);
}
.posts-filtered-notice {
@ -87,12 +90,12 @@ html.footer-nav-ipad {
padding-bottom: 0; // resets safe-area-inset-bottom
}
#reply-control,
#reply-control.fullscreen {
z-index: z("ipad-header-nav") + 1;
}
.d-header-wrap {
top: var(--footer-nav-height);
}
#reply-control.open {
height: calc(var(--composer-vh, 1vh) * 100 - var(--footer-nav-height));
top: var(--footer-nav-height);
}
}

View File

@ -7,17 +7,6 @@
}
#reply-control {
// We override values set in base/compose.scss so that on mobile, the composer is top-anchored.
// This is not ideal, but it is much better than bottom-anchoring.
// Mobile browsers (especially Safari and Firefox/Android) do not handle well
// a bottom/fixed-positioned element, especially while the software keyboard is visible.
top: 0;
// With height and z-index: -1, the composer jitters a lot less
height: 100%;
z-index: -1;
max-height: unset;
min-height: unset;
.reply-area {
padding: 6px;
padding-bottom: unquote("max(env(safe-area-inset-bottom), 6px)");
@ -25,15 +14,11 @@
}
&.open {
display: flex;
z-index: z("mobile-composer");
height: calc(var(--composer-vh, 1vh) * 100);
}
.keyboard-visible &.open {
.reply-area {
padding-bottom: 6px;
}
.keyboard-visible &.open .reply-area {
padding-bottom: 6px;
}
.reply-to {
@ -70,10 +55,6 @@
}
&.draft {
top: calc(100% - 40px);
z-index: z("footer-nav") + 1;
padding-bottom: env(safe-area-inset-bottom);
.toggle-toolbar,
.toggle-minimize {
top: 6px;