android端末におけるinputのバグ

こんばんわ。
先の焼肉のショップはほぼ完成してるので、今度は親サイト？を修正しています。

今後展開していくサイトは子サイト。カテゴリが1階層。
親サイトは、商品自体も追加するけど、子サイトのポータル的な存在にする予定。
そうすると、カテゴリの階層が1段深くなる。


先の焼肉であれば、

亀山社中
石垣牛
アグー豚
国産黒毛和牛
・
・
・

これがカテゴリ。


でも、親サイトの場合は階層が1つ深くなって、

焼肉
　　亀山社中
　　石垣牛
　　アグー豚
　　国産黒毛和牛
美容
　　ダイエット
　　美白
　　・
　　・
　　・

階層が1つ深くなることでCSSが少し複雑になる。
他にもいくつか修正すべき点があり、数箇所修正した。



でも、1箇所だけ修正できなかったのが、表題の件。


サイトをスマホで表示した時、
横画面では通常のPCとほぼ同じ感じで表示、

ヘッダー

メイン　　サイドバー

フッター



縦画面の場合は

ヘッダー

メイン

サイドバー

フッター

となる。


で、問題の検索ボックスはサイドバーの上部に設置してある。


縦画面の時に検索ボックスで検索しようとすると、formの入力エリアにフォーカスして、キーボードが表示されるんだけど、そのあとに、縦画面なのに横画面用のCSSを読み込んでキーボードが閉じてしまう。
iOSでは問題ない。
いろんなキーボードのアプリで試したけど、日本語だとダメで英語にしていれば大丈夫みたい。


サイドバーではなく、もとからメインコンテンツのエリアに検索ボックスを表示させておくと一応大丈夫なことは判ったけど、できればサイドバーがいい。


ググっても日本語のサイトには明確にはいくつかのサイトにしか書いてないし解決できてない。
海外のサイトを調べても、『Javascriptで検索をネイティブに行って・・・』とかあるけど、そこまでの技術も自分にはないし、第一、検索にそこまで求めてない。


・・・で、結局そのまま放置することにした。
CSSやjavascript・jQueryで縦画面のときに表示を消すことやposition:absoluteとか、いろいろ試したり考えたりしたけど、しっくりこなかった。


ちなみにおそらく上記のバグは画面左からの位置のバグみたいで、position:absoluteの場合にleft:1px;とかで左側から指定してやると縦画面でも検索はできる（ただし、背景はすでに横画面用のCSSを読み込んでいて、検索ボックスからフォーカスが離れると縦画面のCSSに戻る）


まぁ、初心者向けの内容じゃないので若干マニアックだけど、レスポンシブデザインがもう少し広まったら、すごく問題になると思う。
検索ボックスのinputが思い通りに動かないんだから・・・


頭のいい人、なんとかしてください。
上にヒントは書きましたよ～