Как предотвратить смещение фонового изображения вверх при появлении программной клавиатуры на мобильном телефоне и планш ⇐ CSS

[Anonymous]

Я столкнулся с проблемой в своем приложении Angular: при нажатии на текстовую область с идентификатором «сообщение» программная клавиатура отображается так, как ожидалось, на мобильных и планшетных устройствах. Однако когда появляется программная клавиатура, мое фоновое изображение сдвигается вверх, что приводит к нежелательному сдвигу макета. Как я могу гарантировать, что фоновое изображение останется на месте, пока поверх него появится программная клавиатура?
HTML:

Код: Выделить всё

Start a conversation





Open to collaborations and connections for exciting ventures.

Let's build something meaningful together – reach out today!



Name


Email


Message


Send Message

{{successMessage}}

{{failureMessage}}

CSS:

Код: Выделить всё

.start-a-conversation-container.with-background-start-a-conversation {
background: var(--black) url("src/assets/img/background-start-a-conversation.png") center center/cover no-repeat;
height: 100vh;
width: 100%;
padding: 2rem;
box-sizing: border-box;
position: relative;
}

.with-background-start-a-conversation::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: var(--black) url("src/assets/img/background-start-a-conversation.png") center center/cover no-repeat;
}

Я попытался решить эту проблему, реализовав различные подходы CSS. Первоначально я установил фоновое изображение, используя свойство фона с положением: исправлено. Предполагалось, что фон останется фиксированным, но при этом поверх него появится программная клавиатура. Однако когда появилась программная клавиатура, фоновое изображение все равно сместилось вверх.
Чтобы исправить это, я попытался установить фоновое изображение как псевдоэлемент (::before) с позицией: зафиксированный. Ожидалось, что этот подход предотвратит смещение фона при появлении программной клавиатуры. Тем не менее, проблема сохранялась, и фоновое изображение продолжало двигаться вверх.
Впоследствии я реализовал функцию TypeScript для динамической регулировки размера фона в зависимости от высоты содержимого. Эта функция запускалась при событиях изменения размера и первоначально при инициализации компонента. Несмотря на эти усилия, фоновое изображение по-прежнему смещалось, когда программная клавиатура появлялась на мобильных и планшетных устройствах.
В целом, ни одна из этих попыток не решила проблему успешно, и фоновое изображение продолжало перемещаться вверх. когда появилась программная клавиатура.

Подробнее здесь: https://stackoverflow.com/questions/784 ... rd-appears