• コーディング ファクトリーHOME
  • Coding Methodology
  • 第62回 iPhone iOS6でinputタグの右側に余白が出来るバグ

コーディングメソドロジー

第62回 iPhone iOS6でinputタグの右側に余白が出来るバグ

iOSは比較的バグの少ないOSではありますが、バージョンごとやある条件下でバグが発生する場合があります。
form系のタグではiOSのバージョンが異なると挙動が変わることがあるので注意して制作することが必要です。

inputを画面幅いっぱいのリキッドで制作する
input:textを画面幅いっぱいに表示できるように制作します。
landscape(横方向)でもportrait(縦方向)でも対応できるように全体的にリキッドで制作し、inputの左右に0.5%余白を空けます。
inputの中は文字が枠につかないように上下左右に余白をとります。
widthを%で指定し、左右も%で余白をとります。
また、html5を使用しているので、placeholder属性を使ってユーザーにわかりやすいフォームを制作します。(01)(02)

01HTMLソース

01 HTMLソース

02CSSソース

02 CSSソース

03バグが出来てしまうCSS

03 バグが出来てしまうCSS

04画面右側に余白が空く

04 画面右側に余白が空く

画面を回転させると画面全体の右側に余白が空いてしまう

普通上記のように組むと全体をリキッド対応しているため、画面いっぱいになるはずなのですが、iPhone iOS6で画面をlandscapeからportraitに回転した時、画面全体の右側に余白が出てしまう現象が出てしまいます。(04)

余白が出てしまうと何度回転し直してもリロードしない限り右側に余白が空いてしまいます。

出現する条件

このバグには出現する条件があります。出現する条件は、

  • ・iPhone iOS6
  • ・inputにplaceholder属性を使用
  • ・widthを%で指定

この条件を満たすときに出現します。
(01)ではplaceholder属性を使用しており、(03)ではwidthの%指定をしていて、この条件を満たすことになります。

05解決済みのCSS

05 解決済みのCSS

解決方法
この現象を解消するには、横になったときに大きくなったinputのはみでたwidthを削除すればキレイに収まるので、inputを囲む親要素に対してoverflow:hiddenをかけます。 (05)
すると、回転しても画面右側の余計な余白がなくなり、他のiOSバージョンと同じ、画面幅いっぱいリキッドのページとなります。
  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム