web-dev-qa-db-ja.com

position：iPadとiPhoneでは修正されない

私はしばらくの間iPadで固定位置に苦労してきました。私は知っています iScroll そしてそれはいつもうまくいくとは思えません（彼らのデモでも）。 Senchaにはそれに対する修正があることを私はまた知っています、しかし私はできませんでした Ctrl + F その修正のソースコード。

誰かが解決策を見つけられることを願っています。問題は、iOS搭載のモバイルSafariでユーザーが上下に移動しても、固定位置の要素が更新されないことです。

iphonecssipadiosmobile
128
Tower

私は新しいjQuery Mobile v1.1を使用してしまいました。 http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

私たちは今や多くの人気のあるプラットフォーム上で真の固定ツールバーを提供し、他のブラウザでの静的なツールバー配置に安全に頼るようなしっかりとした書き直しをしています。

このアプローチの最もクールな部分は、すべてのプラットフォームに渡って不自然なスクロール物理学を強いるJSベースのソリューションとは異なり、がであるため100％ネイティブに感じられるということです。 ）これは、スクロールはどこでも正しく感じられ、タッチ、マウスホイール、キーボードのユーザー入力で機能することを意味します。おまけとして、私たちのCSSベースのソリューションは超軽量で、互換性やアクセシビリティには影響しません。

6
Tower

小さな画面では固定要素が邪魔になる可能性があるため、多くのモバイルブラウザは意図的にposition:fixed;をサポートしていません。

Quirksmode.orgサイトには、問題を説明する非常に良いブログ記事があります。 http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

どのモバイルブラウザがposition:fixed;をサポートしているかを示す互換性チャートについてもこのページを参照してください。 http://www.quirksmode.org/m/css.html

（ただし、モバイルブラウザの世界は急速に変化しているため、このようなテーブルは長期間にわたって最新の状態に維持されない可能性があります。）

アップデート：iOS 5とAndroid 4の両方に位置付けがあると報告されています：サポートが修正されました。

私は本日AppleストアでiOS 5をテストし、それが固定された位置で動作することを確認することができます。ただし、固定要素を拡大してパンすることには問題があります。

私はこの互換性テーブルをquirksmodeのものよりはるかに最新かつ有用であることがわかりました。 http://caniuse.com/#search=fixed

それはアンドロイド、オペラ（ミニとモバイル）＆iOSの最新情報を持っています。

66
Spudley

固定位置は、コンピュータの場合のようにiOSでは機能しません。

虫眼鏡（ビューポート）の下に一枚の紙（Webページ）があり、虫眼鏡と目を動かすと、ページの別の部分が見えるとします。これがiOSのしくみです。

今単語が付いている透明なプラスチックのシートがあります、このプラスチックのシートは何に関係なく静止したままです（位置：固定要素）。虫眼鏡を動かすと、固定要素が表示されます。

あるいは、虫眼鏡を動かす代わりに、プラスチックと虫眼鏡のシートを動かさずに紙（Webページ）を動かします。この場合、プラスチックシート上のWordは固定されたままで、残りのコンテンツは移動しているように見えます（実際はそうであるため）これは伝統的なデスクトップブラウザです。

そのため、iOSではビューポートが移動し、従来のブラウザではWebページが移動します。どちらの場合も、固定要素は依然として現実のままです。 iOSでは固定要素は動いているように見えますが。

これを回避する方法は、最後の数段落に従うことです この記事

（基本的にはスクロールを完全に無効にし、コンテンツを別のスクロール可能なdivに入れます（リンクされた記事の上部にある青いボックスを参照）、そして固定要素は絶対に配置されます）。

「position：fixed」はiOS 5で期待通りに動作するようになりました。

37
Jonathan.

position：Android/iphoneでの縦スクロールの動作を修正しました。ただし、メタタグが完全に設定されていることを確認する必要があります。例えば

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

また、Android 4.0より前のAndroidでも同じページを使用することを計画している場合は、トップ位置も設定する必要があります。そうしないと、何らかの理由でわずかな余白が追加されます。

22
Jason D.

今Appleはそれをサポート

overflow:hidden;
-webkit-overflow-scrolling:touch;
20
Uğur Özpınar

固定フッター（ここではjQueryを使用）：

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

それが役に立てば幸い。

14
Martin

私はSafari（iOS 10.3.3）でこの問題を抱えていた - touchendイベントが発生するまでブラウザは再描画されなかった。固定要素が表示されなかったか、切り取られました。

私にとってのトリックは、変換を追加することでした。translate3d（0,0,0）;私の固定位置要素に。

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

EDIT - トランスフォームが問題を解決する理由、つまりハードウェアアクセラレーションがわかりました。 3D変換を追加すると、GPUアクセラレーションがトリガーされてスムーズな移行が可能になります。ハードウェアアクセラレーションチェックの詳細については、こちらの記事を参照してください。 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css 。

10
kenecaswell

Transform：---とposition：fixedを使って同じボックスを避けてください。要素はその位置に留まります。変換がある場合はstaticです。

7
Becario Senior

jqueryを使ってこれを思いつくことができます。スクロールはスムーズではありませんが、うまくいきます。下にスクロールすると、固定のdivが一番上に表示されます。

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

ジュエリー

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

最後に我々はそれに応じて表示するために横長または縦長モードのiPod touchかどうかを判断したいです。

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>
1
abdullah

CSS属性の{position:fixed;}が（ほとんど）新しいiOSデバイスで機能しているように見えても、原因や理由がなくても、デバイスを癖にして{position:relative;}にフォールバックさせることは可能です。通常、キャッシュがクリアされると、何かが起こり、再び気まぐれが起こるまでは役に立ちます。

具体的には、Apple自身から iPad用にWebコンテンツを準備する ：

IPadのSafariおよびiPhoneのSafariには、サイズ変更可能なウィンドウがありません。 iPhoneおよびiPad上のSafariでは、ウィンドウサイズは画面サイズ（Safariのユーザーインターフェイスコントロールを除く）に設定され、ユーザーが変更することはできません。 Webページを移動するには、ユーザーがダブルタップまたはピンチインしてズームインまたはズームアウトするとき、またはタッチしてドラッグしてページをパンするときに、ズームレベルとビューポートの位置を変更します。ユーザーがズームレベルとビューポートの位置を変更すると、固定サイズの表示可能なコンテンツ領域（つまりウィンドウ）内で変更されます。つまり、ビューポートに対して「固定」された位置を持つWebページ要素は、画面外の表示可能なコンテンツ領域の外側に配置される可能性があります。

皮肉なことに、Androidデバイスにはこの問題はありません。 bodyタグを参照するときに{position:absolute;}を使用することも可能で、問題はありません。

私はこの癖の根本的な原因を見つけました。 HTMLタグまたはBODYタグと組み合わせて使用​​すると、Niceイベントが再生されないスクロールイベントです。イベントを発生させたくない場合があります。そうでないと、スクロールスウィングイベントが完了するまで待つ必要があります。具体的には、ビューポートはこのイベントの最後に再描画され、固定要素はビューポート内の他の場所に再配置できます。

それでこれが私がすることです：（ビューポートの使用を避け、DOMに固執します！）

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

本質的にこれはBODYをビューポートのサイズにしてスクロール不可能にするでしょう。内部にネストされたスクロール可能なDIVは、通常のBODYと同じようにスクロールします（スウィング効果を除くと、スクロールはタッチエンドで停止します）。固定されたDIVは、干渉なく固定されたままです。

ちなみに、固定DIVの高いz-index値は、スクロール可能なDIVがその背後にあるように見せるために重要です。私は通常、ウィンドウサイズ変更やスクロールイベントをクロスブラウザや他の画面解像度との互換性のためにも追加します。

他のすべてが失敗した場合、上記のコードは{position:absolute;}に設定された固定およびスクロール可能なDIVの両方で機能します。

1
Talvi Watia

この問題を解決する簡単な方法は、要素の変換プロパティを入力するだけです。修正されます。ハッピーコーディング:-)

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

また、あなたは彼の方法を試すことができます、これもうまくいきます。

.classname{
      position: -webkit-sticky;
    }
0
Amit Verma

私の場合は、DOMに追加しても元々表示されていなかったposition: fixed要素がスクロールによって表示されました。それで、私は手動でscrollイベントを引き起こし、それが今度は再描画と出来上がりを引き起こしました。

window.scrollTo(window.scrollX, window.scrollY);
0
Eran Goldin