Проблема с положением полосы прокрутки в Chrome на мобильном просмотре

#css #reactjs

Вопрос:

Я искал везде и перепробовал почти все, что мог, чтобы исправить эту проблему, но без шансов.

Веб-сайт, над которым я работаю, работает, как и ожидалось, на рабочем столе, однако мобильный просмотр — это совсем другая история…

Safari в порядке, но Chrome на iPhone ведет себя странно, когда я запускаю обновление или прокрутку. Я не могу решить это сам и надеюсь, что сообщество сможет помочь!

Вот последняя версия моего кода CSS:

 /* put styles header */
* {
    box-sizing: border-box;
}
    
*:before,
*:after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    position: relative;
}
    
#container {
    min-height: 100vh; /* will cover the 100% of viewport */
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px; /* height of your footer */
    background: #f7f7f7;
}

Вид полосы прокрутки при первой загрузке

После прокрутки или перетаскивания для обновления

Я пытался скрыть это, сбросить положение полосы прокрутки или отключить прокрутку / вытягивание для обновления

Любые предложения приветствуются!

Спасибо!

Ответ №1:

Добавьте приведенный ниже код в свой HTML.

В HTML-файле внутри тега head

 <meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете изучить больше здесь
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

1. Спасибо за ваш комментарий на днях. У меня это уже было в моей мете, поэтому я думал, что это не связано, но это так! Мои мета-настройки были применены неправильно и не отражены в заголовке индексного файла после сборки. Я исправил эту часть, и теперь она работает так, как ожидалось. Я не могу пометить это как правильный ответ, было бы здорово, если бы кто-нибудь мог сделать это за меня, спасибо!

Ответ №2:

Я вижу такую ошибку с google.com , с stackoverflow.com и многие другие сайты. Я думаю, это не ваша проблема, но Google Chrome под iOS

1. Привет, Пол. Если вы хотите внести свой вклад в обсуждение, но на самом деле не знаете ответа для человека, отправляющего вопрос, лучше не создавать ответ с вашим комментарием, а прокомментировать вопрос напрямую. Спасибо!