На iphone в Safari некорректно работает position:absolute?

Question

[Max1102]

Здравствуйте. Не пойму в чем дело. Есть меню с классом .menu__bottom__fixed__mob, которое я позиционирую внизу страницы. Но на Iphone 4,5,6 меню внизу страницы появляется только если прокрутить почти в самый конец, на планшете iPad и на устройствах Android все нормально.
Свойства элемента .menu__bottom__fixed__mob {

position: fixed;
width: 100vw;

z-index: 3000;
background: #ffffff;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: space-between;
padding-left: 20%;
padding-right: 20%;
padding-top: 10px;
padding-bottom: 10px;

border-top: 2px solid #ff0000;

}

Сам сайт на котором меню Cсылка
Просьба писать только про меню внизу страницы, так как сайт в разработке и многое сделано не так)
Тестировал сайт на сервисе https://appetize.io/.

Comments

[Кирилл Никитин]

Достал и проверил на iPhone 4 — меню с тремя иконками доступно сразу. Однако, если вам нужны старые браузеры, не забывайте добавлять префиксы, -webkit- в частности.

[Max1102]

Получается на appetize.io не проверишь. А есть ли какие-то ещё сервисы для тестирования, чтобы можно было посмотреть как на текущих браузерах работает?

Answer 1

[Кирилл Никитин]

Я сделал для вас скриншот на iPhone 4. Как уже писал, панель снизу позиционируется нормально и зафиксирована сразу, проблема с иконками на ней и шириной шапки сайта, дальше до самого низа сайт в порядке.

Скриншот

Я не знаю как технически реализована эмуляция на этом appetize, лично мне хватает вёрстки по стандартам и режима отзывчивого дизайна браузера (есть в сафари, хроме, фоксе). Но многие ещё издавна пользуются сервисом BrowserStack, попробуйте его. И, как я уже писал, не забывайте про префиксы для старых браузеров.