React Web App движется горизонтально на iPhone

Question

Я смог исправить это за несколько месяцев go для моего клиента. Теперь, когда мы разделили css, который должен обрабатываться WebPAck для получения статуса PWA, я обнаружил, что он вернулся.

Проблема в том, что на целевой странице этого тестового сайта (https://foxtail-stage.netlify.com/). Весь сайт перетаскивается влево и вправо! Это только на iPhone, поэтому я знаю, что это еще одна проблема Safari.

Мне удалось исправить это, добавив x-overflow: скрытый для классов. html и .body.

Но, как я уже сказал ... теперь он вернулся: (

Как я могу решить эту проблему раз и навсегда?

Answer 1

Похоже, у вас возникли две проблемы:

1) относительно того, что overflow-x не работает, у вас есть переопределенный стиль для тега body, который имеет overflow-x: unset;, что делает ваш overflow-x: hidden; несуществующий.

2) что-то в вашем пользовательском интерфейсе вырывается из его контейнера, ширина на iPhone X составляет 414 пикселей, но составная ширина составляет 415 пикселей, поэтому вы должны отладить весь пользовательский интерфейс и убедиться, что ничего не выходит .

Надеюсь, это поможет!