iOS5を（サファリ）、バグ「の位置：固定」のdiv、そして背の高いフォーム

Question

すべて、

私は非常に含まれ、Webアプリケーションに取り組んでいる 『背の高い』フォームを（背の高いことで、それをそれは典型的な画面）よりも数百パーセント背が高いということを意味する。

をデザインに関係なく、フォーム内のユーザーの位置を、常に表示の画面の下部に固定「フッタ」のために呼び出します。

で言い換えれば、ユーザーがフォームの上部、中央、下部のいずれにあるかにかかわらずフッターを表示する必要があり、フォームはその下にスクロールする必要があります。

これを実装するには、position:fixedとbottom:0のdivとしてフッターを作成しました。

これはiOS5のSafariを含め、テストしたすべてのブラウザで完全に機能します。

ONEバグがあります除き...

ユーザーがフォームの上部付近で、テキストフィールドのいずれかにフォーカスを与えた場合は - 予想通り、iOSのキーボードを示しています。

ユーザーがクリックするたびに次のボタン、iOSが次のフィールドに「タブ」します。

を繰り返しクリックしてフォームを進めると、iOSはフォームを自動的に「スクロールアップ」して、フォーム上の自分の位置が表示されたままになります。

しかし、iOSでは、position:fixedフッターdivの位置が更新されていないようです。フォームの残りの部分とともに誤ってスクロールします。

ユーザーがキーボードを閉じると、divは「適切な」場所に復元されるため、これは回復不可能なエラーではありません。しかし、フッターがまったく動いているという事実は目立つ問題です。

iOSの実装がposition:fixedのバグですか？それとも、私が間違っていることがありますか？事前に

多くの感謝！ http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/：

は[UPDATE]

レミーシャープは、（適切な名前）だけのiOS/Safariでposition:fixedでバグや問題のさまざまな程度優れており、詳細な記事を書いています。それは私がposition:fixedはもともとのiOSの初期のバージョンではサポートされていなかったことを知っている

Answer 1

...あなたはiOSのユーザーを対象とサイト上のposition:fixedを使用して考えている場合は必読だ、私はiOS5を、それをサポートしています知っているが、私は持っています過去にそれに問題があった。あなたのフッタが何らかのコントロールバーであれば、CSSスティッキフッタを使用して、すべてのページ/コンテンツを上記のdivにロードすることをお勧めします。

Answer 2

jQueryを使用していますか？もしそうなら、私はこの作品の作品のようなものを疑う：

$(":input").focus(function() { 
    $(window).scrollTop($(window).scrollTop() + 1); 
}); 

新しいフォーム要素を中心にした後、ページの1ピクセルをスクロールすることによって、それはが固定要素の下の属性をリセットする必要があります。

Answer 3

ここでは、フッターがあなたの周りに飛び跳ねることなく、修正されています。

1. 最初にdivとbody/sectionをラップします。そのdivをスクロール可能にします。
2. 他のすべてのものに対して、絶対的なフッターと位置を指定するよりも、
3. 固定高さを追加します。
ここで働く、それを参照してください

、あなたの歓迎:)私はこのバグのために見つけた他の回答の

Answer 4

なしには私のために働いてきたhttp://yinnetteolivo.com/footerbottom.html

。私は34pxでページをスクロールするだけで問題を解決できました。モバイルSafariがそれをスクロールする量。 jquery：

$('.search-form').on('focusin', function(){ 
    $(window).scrollTop($(window).scrollTop() + 34); 
}); 

これは明らかにすべてのブラウザで有効ですが、iOSでの破損を防ぎます。