Неполное фоновое изображение, когда на мобильных устройствах появляется клавиатура

Question

У меня есть тело и HTML с height: 100% из-за vertical-align материала для контейнера (центральный контейнер). моя проблема, у меня есть форма здесь, и когда я фокус текстовое поле в форме, как правило, браузер заставляет страницу наверх, и я в порядке с этим. Дело в том, почему мой фон становится неполным и дефектным , когда клавиатура появляется в мобильном телефоне ??

<div class="container d-flex h-100 justify-content-center align-items-center">
    <div class="row justify-content-center" id="Level-1">
        <div class="col-12">
            <div class="row flex-column justify-content-center align-items-center">
                <div class="col-auto">
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                    <p>sadddddddddddddddddddddddd</p>
                </div>
                <div class="w-100"></div>
                <div class="col-lg-8">
                    <div class="row justify-content-center">
                        <form>
                            <div class="form-group d-flex justify-content-center">
                                <input type="tel" class="form-control rounded stroke text-center" id="inputEmail3" placeholder="phone number">
                            </div>
                            <div class="form-group d-flex justify-content-center">
                                <button onclick="" type="submit" class="btn btn-block rounded buttonStyle " id="SendPhone">SEND</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

и это мой стиль:

html{
  height: 100%;
  background: #1c7430;
}

body{
  height: 100%;
  background: url("../images/BG-web.jpg") center/cover no-repeat;
}
.rounded{
  border-radius: 20px !important;
}
.stroke{
  border: 2px solid #1c7430;
}
.buttonStyle{
  background-color: $orange_color;
}
.buttonStyle:disabled{
  background-color: $disabled_color;
}
.vertical-center {
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

Answer 1

Причина в том, что когда клавиатура выскакивает, окно просмотра устройства сжимается и изображение настраивается на уменьшенную высоту.Решение состоит в том, чтобы ваши элементы div всегда обеспечивали 100% высоты.

Попробуйте сделать

html,body{
   height:100%;
}
.container{
   min-height:100%;
}

Вместо установки фона внутри тела подумайте о создании дополнительного div с классом.background, установите его положение относительно и высоту 100%

.background{
    position:relative;
    background:url("yourimage") cover no-repeat;
    height:100%;

} 

установите содержимое формы внутри div с классом .form-contents и установите абсолютную позицию

.form-contents{
    position:absolute;
}