fix(mobile): confusing shift when opening keyboard in split on iOS

This commit is contained in:
Elian Doran 2026-02-25 19:08:20 +02:00
parent 1c1895b2eb
commit 5ec9770b07
No known key found for this signature in database
2 changed files with 17 additions and 10 deletions

View File

@ -3,7 +3,7 @@ import { LOCALES } from "@triliumnext/commons";
import { EventData } from "../../components/app_context.js";
import { getEnabledExperimentalFeatureIds } from "../../services/experimental_features.js";
import options from "../../services/options.js";
import utils, { isMobile } from "../../services/utils.js";
import utils, { isIOS, isMobile } from "../../services/utils.js";
import { readCssVar } from "../../utils/css-var.js";
import type BasicWidget from "../basic_widget.js";
import FlexContainer from "./flex_container.js";
@ -34,6 +34,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
}
this.#setDeviceSpecificClasses();
this.#setMaxContentWidth();
this.#setMotion();
this.#setShadows();
@ -120,6 +121,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
document.body.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
}
#setDeviceSpecificClasses() {
if (isIOS()) {
document.body.classList.add("ios");
}
}
#initPWATopbarColor() {
if (!utils.isPWA()) return;
const tracker = $("#background-color-tracker");

View File

@ -2,7 +2,7 @@ body.mobile {
.classic-toolbar-outer-container {
contain: none !important;
}
.classic-toolbar-outer-container.visible {
height: 38px;
background-color: var(--main-background-color);
@ -10,14 +10,14 @@ body.mobile {
overflow: visible;
flex-shrink: 0;
}
#root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios {
#root-widget.ios.virtual-keyboard-opened .classic-toolbar-outer-container {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
}
.classic-toolbar-widget {
position: absolute;
bottom: 0;
@ -30,15 +30,15 @@ body.mobile {
user-select: none;
scrollbar-width: 0 !important;
}
.classic-toolbar-widget::-webkit-scrollbar:horizontal {
height: 0 !important;
}
.classic-toolbar-widget.dropdown-active {
height: 50vh;
}
.classic-toolbar-widget .ck.ck-toolbar {
--ck-color-toolbar-background: transparent;
--ck-color-button-default-background: transparent;
@ -47,8 +47,8 @@ body.mobile {
background-color: transparent;
border: none;
}
.classic-toolbar-widget .ck.ck-button.ck-disabled {
opacity: 0.3;
}
}
}