У меня есть кликабельный липкий div в нижней части экрана.
Это CSS как:
.bottomFixed {
position: fixed;
height: 300px;
bottom: 0;
background-color: #CDDC39;
}
Вы можете проверить это на https://s3.ap -south-1.amazonaws.com / github-charan / chrom-bug / index.html
Вы можете увидеть запись вопроса на
https://s3.ap -south-1.amazonaws.com / GitHub-Чаран / хром-ошибка / chrom-click-area-bug.mov
Ожидается: После прокрутки страницы на мобильном телефоне я ожидаю, что этот div останется закрепленным, а весь div должен оставаться активным.
Факт: Этот div остается липким. Тем не менее, его интерактивная область изменяется. Он сдвигается вверх или вниз. Вот скриншот:
Это смещение активируемой области связано с наличием строки URL. Из журнала видно, что это происходит, когда событие изменения размера окна перестает срабатывать.
Также до сих пор мы наблюдали это только с Chrome 67, Android.
Как его воспроизвести?
Я создал образец HTML, чтобы объяснить проблему. Вы можете получить к нему доступ по адресу:
https://s3.ap -south-1.amazonaws.com / GitHub-Чаран / хром-ошибка / index.html
Открыть этот URL на мобильном телефоне. В исходном состоянии оба стержня прилипают ко дну. и, щелкая в любом месте на панели, переключает их цвет.
Теперь поиграй со страницей. Затем, внезапно, вторая полоса больше не выравнивается с нижним колонтитулом. Он сдвигается вверх или вниз. В этот момент щелкните по краям первого бара, его верхняя или нижняя область перестает реагировать на щелчки.
Как его отладить?
Пожалуйста, подключите свой мобильный телефон с помощью функции удаленных устройств Chrome Dev Tools.
Нажмите на ссылку выше на мобильном телефоне.
Затем наведите курсор на элемент «bottomFixed» на вкладке «Элементы» в Dev Tools.
Теперь поиграйте с экраном. При прокрутке на экране отображается новый размер окна. Когда вы нажмете где-нибудь в этом div, он отобразит сообщение журнала консоли. Кроме того, цвет div будет переключаться.
Затем, внезапно, эта заготовка прекращается, и область вылова перемещается вверх или вниз. div "topFixed" не остается привязанным к нижнему колонтитулу.
Теперь нажмите на область за пределами области поиска. Перестает работать!
Insights:
Высота смещения равна строке URL.
Если в исходной раскраске присутствовала панель URL, т. Е. При прямом попадании на страницу, область, реагирующая на щелчки, перемещается вверх.
и, если в исходной краске полоса URL-адреса отсутствовала, т. Е. При переходе с помощью навигации область, активируемая нажатием, сдвигается вниз.
Так как window.resize не запускается, расстояние в пикселях липкого элемента div относительно вершины не изменяется. Однако сама вершина изменяется из-за наличия / отсутствия url bar.
Если мы изменим css, чтобы сделать этот div прикрепленным к вершине, а не к нижней части, как в div "topFixed", тогда этот div также сдвигается вместе с активируемой областью.
Пожалуйста, помогите решить эту проблему. Это серьезная ошибка на производстве. Одно быстрое и уродливое решение - отключить движение панели URL. Ссылка:
Запретить скрытие адресной строки в мобильных браузерах