Клавиатура iOS блокирует динамический нижний холст во Vue 3 с помощью Bootstrap 5 ⇐ CSS

[Anonymous]

Блокировка клавиатуры iPhone Bootstrap 5 Bottom Canvas
Опишите проблему
I Я создаю проект Vue 3 с помощью Bootstrap 5 и реализовал динамический нижний холст (offcanvas), где пользователи могут добавлять контент и взаимодействовать с ним. Однако на iPhone, когда клавиатура всплывает (например, во время ввода формы), она блокирует нижний холст, препятствуя правильному отображению или доступу к содержимому.
Я пробовал использовать Решения CSS, такие как позиция: фиксированная;, нижняя часть: 0; и переполнение: авто;, но они не решили проблему. Проблема, похоже, специфична для обработки элементов фиксированного положения в iOS, когда клавиатура активна.
Кто-нибудь сталкивался с подобной проблемой с клавиатурами iOS и динамическими нижними холстами? Буду очень признателен за любые предложения или обходные пути!
мой код


v-for="(modal, index) in modalStore.modals"
:key="index"
:class="['offcanvas', 'offcanvas-bottom', { show: modal.isOpen }]"
data-bs-backdrop="false"
tabindex="-1"
aria-labelledby="offcanvasBottomLabel"
:style="{ height: modal.height }"
>
















v-if="modalStore.modals.length > 0"
class="offcanvas-backdrop fade show"
@click="handleBackdropClick"
>



import { useModalStore } from "../../../libs/store/modalStore";

export default {
setup() {
const modalStore = useModalStore();

const closeModal = (name) => {
modalStore.closeModal(name);
};

// Backdrop click handler
const handleBackdropClick = () => {
// Get the most recent modal (top-most on the stack)
const currentModal = modalStore.modals[modalStore.modals.length - 1];

// Close the modal if `closeOverlay` is not explicitly false
if (currentModal.props.closeOverlay !== false) {
closeModal(currentModal.name);
}
};

return {
modalStore,
closeModal,
handleBackdropClick,
};
},
};


я попробовал добавить это в скрипт, но все равно не помогло
const adjustModalForIOSKeyboard = () => {
const modalElement = document.querySelector(".offcanvas-bottom");

if (!modalElement) return;

const onKeyboardShow = (event) => {
// Get the keyboard height from the event (iOS provides it)
const keyboardHeight = event?.keyboardHeight || 300; // Fallback height

// Adjust modal height to avoid being blocked by the keyboard
modalElement.style.height = `calc(100vh - ${keyboardHeight}px)`;
};

const onKeyboardHide = () => {
// Reset modal height when the keyboard is hidden
modalElement.style.height = "100%";
};

// Listen to iOS-specific keyboard events
window.addEventListener("keyboardDidShow", onKeyboardShow);
window.addEventListener("keyboardDidHide", onKeyboardHide);

// Fallback for other platforms: focus events
document.body.addEventListener("focusin", onKeyboardShow); // Simulates `keyboardDidShow`
document.body.addEventListener("focusout", onKeyboardHide); // Simulates `keyboardDidHide`
};

onMounted(() => {
adjustModalForIOSKeyboard();
});

onUnmounted(() => {
// Cleanup event listeners
window.removeEventListener("keyboardDidShow", adjustModalForIOSKeyboard);
window.removeEventListener("keyboardDidHide", adjustModalForIOSKeyboard);
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... ootstrap-5