CSS неправильно отображается на iPhoneX

У меня нет iPhone X для тестирования, но я могу дать вам пару идей, чтобы понять, что может быть не так.

1. Поскольку iPhone X довольно старый, в вашем браузере могут быть новые функции CSS, которых нет на телефоне. caniuse.com дает вам обзор того, когда определенные функции стали доступны для общего использования. Единицы «vh» могут быть слишком свежими для iPhone X.
2. Я вижу, что используется позиционирование с использованием «сверху» и перевод, чтобы создать 3 слайда. Это может быть плохой смесью. Вам стоит попробовать flexbox для первого слайда. Иногда также могут возникать проблемы с наслоением, например, «позиция: относительная», и переводы могут приводить к различным контекстам наслоения.
3. Чтобы отладить это, вы можете использовать Xcode, если у вас есть Mac с симуляторами iPhone, чтобы попытаться воссоздать проблему. Вы запускаете симулятор с пустым приложением для iPhone, затем возвращаетесь на главный экран, открываете Safari и переходите на свой веб-сайт. Оказавшись там, вы можете открыть Safari на своем Mac и использовать инструменты разработчика для подключения к симулятору, чтобы точно увидеть, что происходит, изменить правила CSS и т. д.

Я выяснил, что не работает на iPhone X. Это place-content: center. Я удалил его и использовал другой метод для центрирования контента по вертикали.

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;