Позиция относительно стиля ::before не работает на iPhone в Safari, а также в Chrome [закрыто] ⇐ CSS

[Anonymous]

Этот фрагмент кода с относительной позицией в .btn1 и .btn2 работает нормально на Android, но не работает в iPhone в Safari и в Chrome. вот ссылка на веб-сайтrisentechec.com
на Android его позиционирование соответствует ожиданиям, но на iPhone оно позиционировано неправильно, когда я использую инструменты разработчика в Chrome и в мобильном представлении на iPhone, это показывает, что это так работает нормально.
как этого добиться на iPhone.

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

.banner {
position: relative;
text-align: center;
height: 450px;
color: white;
padding: 0 80px;
background-color: black;
}

.banner::before {
background-image: url('/assets/Images/Architectural-Banner.jpg');
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0.6;
}

.banner .btn1 {
position: relative;
top: 40%;
right: 5%;
}

.banner .btn2 {
position: relative;
top: 40%;
}

#

Вот ссылка на изображения Android и iOS

Подробнее здесь: https://stackoverflow.com/questions/783 ... ri-as-well