質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
iOS 9

iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

22869閲覧

position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう

oshieteman

総合スコア7

iOS 9

iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/12/16 05:33

###起きている事象・解決したい問題
・CSSのposition:fixedしている要素内にフォームを設置したいが、おそらくIOSのバグでinputにフォーカスするとページトップへスクロールしてしまう
・フォーカスが入ると、強制的にfixedがabsoluteになってしまうことが原因らしい

参考:iOS8でposition:fixedなheaderに付けたinputにフォーカスを当てると一番上までスクロールしてしまう

上記のようなバグで、フォームを入力することができず困っています。
何か思い当たることがあれば教えていただけますと幸いです。よろしくお願いします。
###発生条件
IOS9.1、9.2(safari)で確認済み
###ソースコード

css

1* { 2 margin:0; 3 padding:0; 4} 5header{ 6 width:100%; 7 height:30px; 8 position:fixed; 9 top:0; 10 left:0; 11 background-color:#F00; 12 text-align:center; 13} 14main{ 15 padding-top:60px; 16} 17footer{ 18 background-color:#000; 19 color:#FFF; 20 text-align:center; 21} 22

html

1<header> 2<input type="text"> 3</header> 4 5<main> 6<ol> 7<li class="row01"></li> 8<li class="row02"></li> 9<li class="row03"></li> 10<li class="row04"></li> 11<li class="row05"></li> 12<li class="row06"></li> 13<li class="row07"></li> 14<li class="row08"></li> 15<li class="row09"></li> 16<li class="row10"></li> 17<li class="row11"></li> 18<li class="row12"></li> 19<li class="row13"></li> 20<li class="row14"></li> 21<li class="row15"></li> 22<li class="row16"></li> 23<li class="row17"></li> 24<li class="row18"></li> 25<li class="row19"></li> 26<li class="row20"></li> 27<li class="row21"></li> 28<li class="row22"></li> 29<li class="row23"></li> 30<li class="row24"></li> 31<li class="row25"></li> 32<li class="row26"></li> 33<li class="row27"></li> 34<li class="row28"></li> 35<li class="row29"></li> 36<li class="row30"></li> 37<li class="row31"></li> 38<li class="row32"></li> 39<li class="row33"></li> 40<li class="row34"></li> 41<li class="row35"></li> 42<li class="row36"></li> 43<li class="row37"></li> 44<li class="row38"></li> 45<li class="row39"></li> 46<li class="row40"></li> 47<li class="row41"></li> 48<li class="row42"></li> 49<li class="row43"></li> 50<li class="row44"></li> 51<li class="row45"></li> 52<li class="row46"></li> 53<li class="row47"></li> 54<li class="row48"></li> 55<li class="row49"></li> 56<li class="row50"></li> 57</ol> 58</main> 59 60<footer> 61footer 62</footer>

###実践してみたこと
①フォーカスが入った時にJavaScriptで強制的にheaderにposition:fixedをつける(インラインで)
⇒ソースを見るとfixedはつくが、挙動はfixedされていなかった

②top:0ではなくbottom:0にしてみる
⇒同じ現象が起こった

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

css

1html,body{ 2 -webkit-overflow-scrolling : touch !important; 3 overflow: auto !important; 4 height: 100% !important; 5}

同じ問題に悩まされていましたが、これでいけました。

投稿2017/03/16 06:42

編集2017/03/16 06:43
hibikikudo

総合スコア238

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

リンク先の内容を細かく見ていないので重複した回答になっていたら申し訳ありませんが、
mainをposition:absolute;にする記述だとfooterが取り残されてしまうということでしょうか?

html側の改変が難しいようであればjsの追記は可能でしょうか?
可能であれば下記のようにmain,footerの2要素を囲ってしまって、リンク先にも記載されていた方法を組み合わせてはどうでしょうか。

javascript

1$("main, footer").wrapAll('<div id="fixedWrapper" />'); 2

css

1#fixedWrapper { 2 position:absolute; 3 top:0; 4 right:0; 5 bottom:0; 6 left:0; 7 overflow-y:scroll; 8}

この方法であればhtmlの構成は変えることなくいけるかとは思いますが、
レイアウトの作り方次第ではabsoluteにすること自体が難しいかも知れないですね…。

投稿2015/12/16 08:28

webnohito

総合スコア88

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oshieteman

2015/12/24 09:21

ご回答ありがとうございます。 おっしゃる通りで、footerがいるんですよね・・・。 今回htmlの改変ができませんので、この方法を試してみたいと思います! 説明が不足している中、ご丁寧にありがとうございます。
guest

0

リンク先に答えが載っているではありませんか。
どちらも実践してみたことには含まれていませんね。
特に、"最も役に立つ回答として採用"された回答は良い解決策だと思いますよ。

投稿2015/12/16 05:43

tozjp

総合スコア790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oshieteman

2015/12/24 09:17

ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問