イナヅマTVログ

モバイルSafari(Webkit)のCSS:overflow

| 5件のコメント

iPhone / iPad 搭載のSafariは当然ながらモバイル用です。
パソコン版Safariとはほぼ同じ仕様だと思いますがスクロールバーの表示が決定的に違います。
パソコン版Safariは他のブラウザと同じように表示領域を削りスクロールバーを表示させます。
モバイル版Safariではスクロールは「スワイプ」をすることで実現します。
スクロールバーは操作しなくとも良いようになっています。
おかげで小さな画面上にもかかわらず直感的に操作できることでストレスを感じることがありません。
使われているエンジンはWebkitです。
このWebkitはePub形式の電子書籍表示にも使われています。

overflow:auto できないモバイルSafari

前置きが長くなってしまいました。

優れたモバイルSafari(Webkit)ですが、いまだに解決(?)できない問題があります。
解決しようとしているのかも疑問ですが・・・

overflow:auto;
/* or */
overflow:scroll;

CSSで上記のように指定されている部分が全て overflow:hidden 扱いになってしまい表示されません。
CSSで上記のように指定されている場合、コンテナからはみ出してしまいスクロールバーが表示して欲しい箇所にスクロールバーが表示されず、overflow:hiddenと同じ状態になってしまいます。
スクロールバーがないので対応していないと想像されます。
当然と言えば当然の結果なのかもしれません。

そのためにコードレビューのようなサイト・書籍の場合、肝心な部分が全く分からないことが良くあります。
これはどうにかして欲しいなぁー。

物理的なスクロールバーが無い以上どうしようもないのかもしれません。

制作側が overflow:auto; などを使わず伸びたり縮んだりするボックスを実装しなければいけないのかもしれません。
width, height のどちらかを指定しないなどの対処が必要かもです。

iPhone / iPad が今後ますます普及していくと、Flashに対応していないこと以外にもこの問題も考慮して制作することが要求されるのかもしれません。

当サイトの表示例です。

見事にコードが切れちゃってます。

overflow:auto; とは関係ないですが、Scribd、Flashを捨てユーザー滞留時間が3倍増なんて記事を読むとなんか色々考えさせられます。

PCブラウザ互換だけでなく iPhone / iPad 最適化も全てのコンテンツとは言いませんが、今後重要な要件になってくるのかもしれません。
Scribd in HTML5
FlashからHTML5へ – ドキュメント共有のScribdが大移動開始

update 2011-09-20
コメントで教えてもらいました。
指二本で縦にスクロールできます。
横はダメっぽい。
エリアが狭いと縦にもうまくスクロールできないときがある。
そもそもスクロール可能かどうかのインフォメーションが何もないのでUIとしては最低。
というわけで、やっぱりイケてなかった。
iOS 5まで待たないと。

5件のコメント

  1. ピンバック: iPadやiPhoneなどwebkitブラウザでoverflow:scrollが不便な件

  2. ピンバック: iPhone & iPad で Actionscript API AsDoc(Livedocs) を見るならMercuryが◎ | イナヅマtvログ

  3. ピンバック: 【速報】iOS5のmobile Safari, CSS対応状況 | イナヅマtvログ

  4. 確かにoverflowでauto、scrollを指定すると表示内容が切れたように見えてしまいますが
    実は二本指でドラッグすると、スクロールできるようですよ。
    ま、スクロールバーが表示されないので、気付かない人が多いのかも知れませんね。

  5. こちらのiOS4はスクロールできないすけどね〜

    あ〜わかりました。
    指二本。
    うまく反応できないことあるなぁ
    なんか置き方であるのかも

    ありがとうございます

コメントを残す

必須欄は * がついています