При нажатии кнопок на мобильном телефоне фон сдвигается вниз (CSS и React) ⇐ CSS

[Anonymous]

Фон опускается каждый раз, когда я нажимаю кнопку в «ic-1»
Я подозреваю, что это несовместимость iPhone. Потому что, когда я позволяю другу протестировать, проблема не возникает.
Вот фрагмент CSS.

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

 .ic-1::before{
content:'';
top:0;
left:0;
width: 100%;
height: 50vh;
z-index: -1;
position: absolute;
filter:brightness(.4) contrast(1.25);
background-image:url('image/bg5.jpg');
background-repeat: no-repeat;
background-size: cover;
}

.ic-1 div{
display: flex;
justify-content: center;

}

.login-form div{
display: flex;
width: 100%;
}

.ic-1 div button{
cursor: pointer;
border:1px rgb(255, 255, 255) solid;
background:none;
text-shadow: 1px 1px 2px black;
color:rgb(255, 255, 255);
margin-right: 1em;
border-radius: 5px;
padding: 10px 20px;
margin-bottom: 2em;
}

.ic-1 div button:hover{
background: rgb(255, 255, 255);
color:black;
text-shadow: none;
border-radius: 10px;

}

Вот фрагмент React.

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

asd
blah blah blah


[url=#origin]
extra [i][/i]
[/url]

• Я пробовал тестировать на нескольких устройствах: Redmi, Windows, Windows (адаптивный мобильный просмотр), и проблемы возникли с iPhone и iPad, но iPhone намного серьезнее, потому что фон не «исправляется» и не принимает исходное положение, как iPad.
• Я также пытался изменить z-index, но похоже, это не работает.
• Изменение ic-1::before с позиции:absolute на позицию:fixed также не работает.

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