mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-20 13:52:24 +02:00
fix(ui): respect iOS safe areas, screen height and landscape layout
This commit is contained in:
@@ -369,6 +369,31 @@ document.addEventListener('DOMContentLoaded', markComposerUserEdited, { once: tr
|
||||
/* ---- Mobile viewport fix — keep chat visible when virtual keyboard opens ---- */
|
||||
{
|
||||
if (window.visualViewport) {
|
||||
const root = document.documentElement;
|
||||
// iOS overlays the keyboard without resizing the layout viewport and scrolls
|
||||
// the page to reveal the field, leaving it shifted after the keyboard closes.
|
||||
const _syncKeyboardViewport = function() {
|
||||
const vv = window.visualViewport;
|
||||
if (vv.scale > 1.01) return;
|
||||
const keyboardOpen = window.innerHeight - vv.height > 120;
|
||||
root.classList.toggle('keyboard-open', keyboardOpen);
|
||||
if (keyboardOpen) root.style.setProperty('--keyboard-viewport-height', vv.height + 'px');
|
||||
else root.style.removeProperty('--keyboard-viewport-height');
|
||||
if (window.scrollY) window.scrollTo(0, 0);
|
||||
};
|
||||
// iOS fires visualViewport resize only once, mid-animation, and no focusin when
|
||||
// the tapped field already had focus (e.g. the composer after a new chat)
|
||||
const _syncThroughKeyboardAnimation = () => {
|
||||
_syncKeyboardViewport();
|
||||
for (const delay of [100, 300, 600, 1000]) setTimeout(_syncKeyboardViewport, delay);
|
||||
};
|
||||
_syncKeyboardViewport();
|
||||
window.visualViewport.addEventListener('resize', _syncThroughKeyboardAnimation);
|
||||
window.visualViewport.addEventListener('scroll', _syncKeyboardViewport);
|
||||
document.addEventListener('focusin', _syncThroughKeyboardAnimation);
|
||||
document.addEventListener('focusout', _syncThroughKeyboardAnimation);
|
||||
window.addEventListener('scroll', () => { if (window.scrollY) window.scrollTo(0, 0); }, { passive: true });
|
||||
|
||||
let _lastVVHeight = window.visualViewport.height;
|
||||
window.visualViewport.addEventListener('resize', function() {
|
||||
const vv = window.visualViewport;
|
||||
|
||||
Reference in New Issue
Block a user