モバイルまたはデスクトップ用に異なるスタイルシートを持つレスポンシブ Web サイトに取り組んでいます。テキスト入力がモバイルで操作されるまで、すべてが見栄えがよく、うまく機能します。彼らは当然のように現れます。しかし、一度クリックすると(ええと..触れた)、Androidのブラウザーが狂ったようにスクロールし始め、入力時に同じことが起こることがわかりました。ただし、テキストは入力に入力され、入力に対するソフト キーボード/フォーカスは失われません。
私のプロジェクトはここにあります: http://www.gortzfruit.nl/new/
問題は、私がしばらくの間解決策を探していて、解決策がうまくいかない同様の問題を見つけたことです。私が調べてきたいくつかのトピックと解決策は次のとおりです。
https://github.com/scottjehl/Device-Bugs/issues/3 - ここでは、問題が配置された要素内にあることが示唆されています。特に固定配置要素内では絶対的です。これは私の設計で繰り返し発生しますが、削除しても問題は解決しませんでした。
Android ブラウザのテキストエリアがいたるところにスクロールし、使用できませ ん -これは、問題が css-properties にあることを示唆しています -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden;. 私はこれらを自分で含めませんでしたが、私が含めた Google Maps API がこれらを使用する可能性があると考えました。Google Maps API が生成するマークアップを分析したところ、彼らもそれを使用していないことがわかりました。
固定位置のテキスト入力フォーム フィールドがフォーカスされたときに、ワイルド スクロールを防ぐにはどうすればよいですか? -これは、問題に対処しようとすることに焦点を当てています。本文をoverflow:hidden;に設定します。フォーカスされている間はスクロールをブロックするように提案されましたが、私にはうまくいきませんでした。
javascriptで入力フォーカスのスクロールを無効にする これは、テキストが実際に入力に入力されるのをブロックします。
これは、この奇妙なスクロールを引き起こす Android のバグに関連していることを知っています。しかし、私はこれに対処する方法をもう知りません。私にとっては、バグを回避する方法を見つけるかどうか、またはバグを目立たなくするハックを見つけるかどうかは問題ではありません。テキストボックスに入力したり、焦点を合わせたり、ぼやけたりしているときに、奇妙なスクロール動作を取り除きたいだけです。
前もって感謝します、
ジェローン