Дикий свиток ввода андроида

Я работаю над отзывчивым сайтом, который имеет другую таблицу стилей для мобильных или настольных компьютеров. Все выглядит хорошо и отлично работает, пока текстовые входы не взаимодействуют с мобильным телефоном. Они появляются, как должны. Но однажды щелкнув (ehrm .. коснулся), я обнаружил, что браузер в Android начинает прокручивать, как сумасшедший, и то же самое происходит при наборе текста. Однако текст вводится на вход, а мягкая клавиатура / фокус на входе не теряется.

Мой проект можно найти здесь: http://www.gortzfruit.nl/new/

Проблема в том, что я искал какое-то решение на некоторое время и нашел похожие проблемы, которые решения для меня не разрабатывались. Некоторые темы – и решения – я изучал:

Https://github.com/scottjehl/Device-Bugs/issues/3 -Убедитесь, что проблема лежит в позиционированных элементах. Особенно абсолютный в неподвижных позиционированных элементах. Это повторяется в моем дизайне, но после его удаления он не решает проблему.

Android Browser textarea прокручивается повсюду, непригодна для использования. Это говорит о том, что проблема связана с css-свойствами -webkit-transform: translate3d (0, 0, 0); И -webkit-backface-visibility: hidden ;. Я не включил их самостоятельно, но я думал, что API Карт Google, который я включил, может использовать их. Я обнаружил, что они тоже не используют его, после анализа разметки API Карт Google.

Как я могу предотвратить дикую прокрутку, когда поле формы ввода фиксированной позиции получает фокус? -Это один сосредоточен на попытке справиться с проблемой. Установка переполнения тела: скрытый; Было предложено блокировать прокрутку во время фокусировки, но это не сработало для меня.

Отключить прокрутку в фокусе ввода в javascript. Здесь предлагается, чтобы возвращение false при keydown могло решить проблему, которую я пробовал без успеха. Этот блок блокирует мой текст от ввода фактического ввода.

Я знаю, что это связано с ошибкой в ​​Android, которая вызывает эту странную прокрутку. Но я больше не знаю, как с этим справиться. Для меня неважно, узнаю ли я, как избежать ошибки, или я найду хак, чтобы сделать ошибку незаметной. Я просто хочу избавиться от странного поведения прокрутки во время ввода и фокусировки / размытия текстовых полей.

Заранее спасибо,

Йерун

Удалите тег meta viewport из вашей разметки и добавьте это сразу после тега тега открытия :

<script type="text/javascript"> <!-- (function() { var meta = document.createElement("meta"); meta.setAttribute('name','viewport'); var content = 'initial-scale='; content += 1 / window.devicePixelRatio; content += ',user-scalable=no'; meta.setAttribute('content', content); document.getElementsByTagName('head')[0].appendChild(meta); })(); //--> </script> 

Это даст вам лучший опыт работы на мобильных устройствах (потрясающий рендеринг изображений!). Я заметил, что на моем устройстве (которое не является Android) у меня были некоторые странные проблемы с прокруткой / масштабированием, и это устраняет это. Дайте мне знать, если это сработает 🙂