iPadでの表示を考慮しposition:relativeとz-index指定を極力やめる

iPhoneとiPadでの操作性や表示不具合の改善を模索している記録第5回目です。当サイト作者が作成した次のテンプレートについてです。

引用(テンプレートの不具合)

customtemplateさんへ 

こんにちは 
私も何とかしてキャプチャした物をお見せできないかと思っていたところです。 
その手がありますね 

早速iPadでの崩れ具合を複数枚載せてみました。 
iPoneも気になったので載せています。 

参考にしてください。 
日付は8月30日でUPしています。
2012年12月30日(日) 15:17 TAKAKO

以下、TAKAKOさんのサイトからの引用と作者の考えを対話形式で載せています。

  1. iPadでの崩れ具合を複数枚キャプチャしてみました。
    現在のテンプレートの状態です。
    こうなったら画面に何をしても動きません。

    左サイドバーの表示がたしかにおかしいですね。左サイドバー全体ではなく、プラグインのプロフィールの横幅が広くなり、ダイエット★マメグラフに重なっているように見えます。プロフィールを非表示にして崩れが解消すれば、プロフィールに崩れの原因がありそうです。プロフィールを非表示にしても、左サイドバーの別のプラグインなどに問題が出ればプロフィール自体には問題はなさそうです。

    201212301245525f0.png
  2. 3~5秒程でしょうか・・・下画像のように消えてしまいます。

    消えていない部分を画面いっぱいに表示していたところ、ピンチインしてフレームインした部分が表示されないということですね。3~5秒経過すると表示されるわけですね。

    20121230124553308.png
    20121230124554057.png
  3. 下画像も2~3秒画面が一部消えています。
    20121230124636d7b.png
  4. 一番下までスクロールした後上にスクロールすると
    トップまで上がって0.5~1秒後にサイドの定位置に戻ります。
    このサイドの写真のエリアが固定表示(追尾)という事ですが
    動きが不自然と思います。

    その不自然な動きで正常です。iPod touch 5でも、スクロールが終わって画面が止まってから表示する部分を計算しそれに基いて表示場所を指定しています。通常のPCであれば0.5秒も遅れることなくスクロールに追従して追尾されます(スクロール中も表示場所を計算するので遅れが少ない)。推測ですが、通常のPCよりも処理能力が低いので、スクロール中に常に追尾させると負担が大きくなるのでそういう仕様になっているのではないかと思います。このサイトのパソコン版の左サイドバーにある追尾広告でも同じ動きになっているのではないでしょうか。

    20121230124634cef.png
  5. 下画像2枚は同じ画面ですが
    上は下までスクロールした状態です
    左サイドの固定表示(追尾)バーが付いてきません
    20121230124632e33.png
  6. 2~3秒遅い時は4~5秒遅れてから表示されます。(下画像)
    (Fc2の追尾広告は前に戻っていますね!)

    上述のとおり、スクロールが止まってから表示場所を計算するので遅れて正常です。ただ、4~5秒は時間がかかりすぎなので、なにがそんなに遅れさせているのかがまだ特定されていません。

    2012123012455620b.png
  7. iPhoneでも確認してみました
    ピンチアウトさせ右画面にドラッグしたところです
    本文に重なりが見られます。
    これが追尾ということでしょうか・・・

    画面右側にドラッグした直後ですよね。すぐに所定の場所へ移動していますよね。

    201212301246373ad.png
  8. ピンチインしたところです。
    0.5秒程で戻る事が多いようですが
    なんだかカッコ悪い・・・

    今のところそういう仕様です。テンプレート改訂時には追尾しない設定を選べるようにしておきます。

    20121230124638ed8.png
  9. 下画像も重なっています
    ピンチイン/アウト の操作も困難です。

    画像再表示エリアがずっと留まっている状態ですか。iPod touch 5ではスクロールをやめれば画像再表示エリアは自動で移動するのですが、iPod touch 5とiPhoneでは同じ結果を得られるという認識を改めなければいけなさそうですね。

    201212301247270b1.png
    201212301247262ad.png
  10. 現在のところiPhoneもiPadも上記の通りです。
  11. 今日気づいた事があって変更してみた事があります。
    iPhoneで私のサイトをPCverで開くと非常に大きい表示になっていて
    まず、ピンチイン(縮小)しなければ見られない状態でした

    そういう設定をしています。それをしないと、別の部分で不具合があったので。

  12. customtemplateさんのサイト『ブログのレイアウトが崩れる場合の対処方法』が目にとまり 『iPhoneでブログをPC表示すると全体が縮小表示』を読み 自分のテンプレートHTMLの指示された部分を削除してみたところ iPhoneでの表示がPC表示と同じ画面で上がるようになりました
    今現在の問題になっている事とは関係ない内容かもしれませんが、 この事によってiPhoneでサイトを開いた直後の操作性がよりスムーズになった事は確かかと感じます。
    開いた直後、ピンチインさせるのに何故かスムーズにいかなかったのです)

    viewport ですね。この部分を削除するのは良いアイデアですね。以前検証いただいたcase 4はこの viewport の設定を少し変更していました。それで若干操作性が良くなったようでしたね。

  13. 以上です。

    上記のとおり、作者は元ページを確認しましたので、引用元ページは非公開などに変更していただいて結構です。

原因特定に向けて

  1. キャプチャ画像や報告いただいた内容を元に、原因かもしれないと思う部分に変更を加えました。以下にいくつかのケースを挙げます。

    1. case 1
    2. case 2
    3. case 3
    4. case 4
    5. case 5
    6. case 6

作者用覚書

eye

  1. css tboxのデフォルトpositionをstaticへ、上へスクロール時のjsで変更する場合もstaticへ

  2. ボタンの挿入場所をsidebarからprimaryなどにprependするよう変更

  3. header以外のz-indexとrelativeを削除

vege

  1. html fc2広告関連 (viewportは削除済み)

  2. 1+ css position:relative;設定削除

  3. 1+ css z-index設定削除

  4. 2+3 css 上記2つ削除

  5. 4+ html fixedbox削除

  6. 5+ htmlとcss 簡易ページ内移動ボタン削除

今回の思考過程

  1. 複数のキャプチャ画像やviewportの見解が参考になった。これにより新たな考えに至った。

  2. テンプレートに問題があるのではなく、iOSやAndroidなどではCSSのマイナーな部類に入るプロパティがあると、表示に問題がでるバグがあると判明。当テンプレートでは、マイナーなプロパティを結構使っているので、iPadなどで表示に問題がでているみたい。

  3. 重なりで問題が生じるなら、上書きを試みるよりも重なり自体を設定しなければいいのではないか。これにより原因を根本から取り除けるのでは。

  4. viewportに関してもしかり。

  5. tboxはcssで固定表示→jsでの追尾に切り替えたのだから、スクロール前にfixedを設定しておきながら重なりを設定しなければtboxがheaderの上に来る(キャプチャ参考)。なので、staticにし、最初はサイドバー下部(背後ではない)に配置しておきながら、一定量のスクロール後に追尾するようにした。

  6. bodyの閉じタグ直前にダミーのdivを挿入していたが、amazonウィジェットを利用すると、fc2追尾広告の弟要素としてアマゾンのdivもbodyの閉じタグ直前に挿入される。amazonウィジェットがあるとダミーdiv作戦が効かないのはこれが理由と判明。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)