IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない

iPhoneでは、フォーム入力のあるiframeをposition:fixedで使ってはいけない

2017/06/5 CSS, iPhone, WebTips, はてなブログ

iPhone で、iframe を position:fixed にした場合の挙動に苦労しています。

前記事: iPhone で iframe を fixed にする場合の問題

  • 問題整理
  • iOS アップデートでさらに挙動が変化
  • position:static で表示し上までスクロールさせる

問題整理

問題を整理しますと、

  • iOS では、iframe を他のコンテンツと同様にすべて表示しスクロールなしになる
  • iframe にフォームがある場合、キーボードを出すと position:absolute になる

この内、一つ目は CSS で解決可能(前記事)です。

二つ目の問題は、さらにややこしくなっていまして、前記事は、iOS 10.2.1だったのですが、その後 iPhone の iOS をアップデートしたところ 10.3.2 になり、挙動がまた変化しました。

iOS アップデートでさらに挙動が変化

サンプルサイトがあります。

サンプルサイト

iPhone で「ボタン position:fixed スクロール可」をクリックし、入力しようとした場合の挙動です。

iframe のフォームがコンテンツの上に表示されます。×アイコンの下のコンテンツは位置がわかりやすいようにわざと見せてあります。

フォームにフォーカスを置きキーボードを出します。iframe が上に飛んでいきませんね。(前記事参照)

キーボードをタップし文字入力をしようとしますと、iframe が上に飛んでしまいボトムまで移動していしまいます。

スクロールして戻しますと、文字は入っています。続けて文字を入力しようとしますと、iframe 自体が消えてしまいます。スクロールしてもどこにもありません。

ということで、結論は、iPhone(iOS?)では、フォーム入力のある iframe を position:fixed で使ってはいけないということです。

position:static で表示し上までスクロールさせる

結局、iframe を ポジションを指定せずその場に読み込み上部まで移動させることにしました。

サンプルサイトの「20 position:static」のボタンです。

HTML には、<div id="ifm-wrapper"></div> を書いておき、ボタンがクリックされますと、Javascript で iframe を読み込み、onload で読み込み完了を監視し、完了後にスクロールさせます。

なぜこんな面倒なことをするのか(笑)は、iPhone(モバイル)の場合、フォーム送信後に元ページに戻るために

  • 同窓リンク(サンプルサイト参照)では、戻る、戻るとしなくてはならない
  • 別窓リンクでは、フォームを閉じるための選択画面を出さなくてはならない

の手間がかかるからです。

そろそろ実装しなくては。

iPhone で iframe を fixed にする場合の問題
はてなブログにお問い合わせフォーム実装
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com