При выборе радиокнопки в нижней части страницы в моем браузере iphone экран переходит прямо вверх.
ПРИМЕЧАНИЕ. Это происходит только на мобильном сайте Codepen. Это не происходит, когда я получаю доступ к html-файлу через Live Server на моем ноутбуке благодаря плагину VSCode
Чтобы смоделировать мою проблему, перейдите по ссылке Codepen через ваш мобильный телефон.
Ссылка на мой Codepen для просмотра кода
Проблема не существует, когда я получаю к нему доступ через мой ноутбук Live Server. Экран не прыгает наверх при нажатии на кнопку радио. См. Изображение ниже
Доступ к файлу HTML через Live Server на моем ноутбуке
Проблема возникает только на мобильном сайте Codepen. См. Изображение ниже
Доступ к файлу через Codepen
Это происходит только на мобильных устройствах (я использую iphone 6s и пробовал его на Chrome и Safari), но я не смог повторить тот же эффект на ноутбуке / рабочем столе. Даже при настройке инструменты chrome dev на моем ноутбуке для отображения размера экрана iPhone, проблема не существует
Я видел некоторые решения, которые требуют, чтобы вы использовали «видимость: скрытый» или «дисплей: нет» и установили «top: auto» для элемента «position: absolute».
Но я бы не хотел использовать «visiblity: hidden» или «display: none», поскольку он не читается программами чтения с экрана.
Эта проблема имеет какое-либо отношение к тому, как Codepen функционирует на мобильном телефоне? Просто мысль.
Любая помощь очень ценится!
Это может помочь
Я мог бы сузить проблему. Кажется, что-то связано с высотой контента.
В ссылке Codepen ниже вы увидите переключатели внизу страницы.
Если вы используете iphone6, вы можете воссоздать прыжок в верхний сценарий, если высота класса ".content" изменится на 1000 пикселей.
Прыжок наверх страницы не произойдет, если вместо этого установить высоту 800px.
Опять же, эту ссылку нужно открыть в браузере мобильного телефона
Вот ссылка на Codepen для этого узкого теста
.content {
width: 100%;
height: 800px;
/* height: 1000px; */
background-color: grey;
}