web-dev-qa-db-ja.com

iOS 8のSafariは、固定要素がフォーカスを取得するときに画面をスクロールします

IOS8 Safariには、位置が修正された新しいバグがあります。

固定パネルにあるテキストエリアにフォーカスすると、safariはページの一番下までスクロールします。

これにより、すべての種類のUIを使用できなくなります。ページを下にスクロールして場所を失うことなく、textareasにテキストを入力する方法がないためです。

このバグをきれいに回避する方法はありますか？

#a {
  height: 10000px;
  background: linear-gradient(red, blue);
}
#b {
  position: fixed;
  bottom: 20px;
  left: 10%;
  width: 100%;
  height: 300px;
}

textarea {
   width: 80%;
   height: 300px;
}

<html>
   <body>
   <div id="a"></div>
   <div id="b"><textarea></textarea></div>
   </body>
</html>
javascriptioscsssafariios8
89
Sam Saffron

これはiOS 10.3で修正されました！

ハックはもう必要ありません。

2
Sam Saffron

これに基づいて 良好な分析 この問題の、私はこれをcssのhtmlおよびbody要素で使用しました：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

私はそれが私にとって素晴らしい仕事だと思います。

54
Mohammad AlBanna

私が思いつく最善の解決策は、フォーカス時にposition: absolute;を使用し、position: fixed;を使用していたときの位置を計算するように切り替えることです。秘Theは、focusイベントの起動が遅すぎるため、touchstartを使用する必要があることです。

この回答のソリューションは、iOS 7での正確な動作を非常によく模倣しています。

要件：

body要素には、要素が絶対位置に切り替わるときに適切な位置を確保するための位置が必要です。

body {
    position: relative;
}

コード （ 実例 ）：

次のコードは、提供されたテストケースの基本的な例であり、特定のユースケースに適合させることができます。

//Get the fixed element, and the input element it contains.
var fixed_el = document.getElementById('b');
var input_el = document.querySelector('textarea');
//Listen for touchstart, focus will fire too late.
input_el.addEventListener('touchstart', function() {
    //If using a non-px value, you will have to get clever, or just use 0 and live with the temporary jump.
    var bottom = parseFloat(window.getComputedStyle(fixed_el).bottom);
    //Switch to position absolute.
    fixed_el.style.position = 'absolute';
    fixed_el.style.bottom = (document.height - (window.scrollY + window.innerHeight) + bottom) + 'px';
    //Switch back when focus is lost.
    function blured() {
        fixed_el.style.position = '';
        fixed_el.style.bottom = '';
        input_el.removeEventListener('blur', blured);
    }
    input_el.addEventListener('blur', blured);
});

比較のためのハックのない同じコードです 。

警告：

position: fixed;要素に、body以外に位置付けを持つ他の親要素がある場合、position: absolute;に切り替えると予期しない動作が発生する可能性があります。 position: fixed;の性質により、このような要素のネストは一般的ではないため、これはおそらく大きな問題ではありません。

推奨事項：

touchstartイベントを使用すると、ほとんどのデスクトップ環境が除外されますが、おそらくユーザーエージェントスニッフィングを使用して、このコードが壊れたiOS 8のみで実行され、Androidなどの他のデバイス以前のiOSバージョン。残念ながら、iOSでAppleがいつこの問題を修正するかはまだわかりませんが、次のメジャーバージョンで修正されない場合は驚かされます。

34
Alexander O'Mara

絶対位置に変更する必要なく動作するメソッドを見つけました！

コメントなしの完全なコード

var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});
var savedScrollPos = scrollPos;

function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }
  return false;
}

$('input[type=text]').on('touchstart', function(){
    if (is_iOS()){
        savedScrollPos = scrollPos;
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });
        $('html').css('overflow','hidden');
    }
})
.blur(function(){
    if (is_iOS()){
        $('body, html').removeAttr('style');
        $(document).scrollTop(savedScrollPos);
    }
});

それを破壊する

最初に、HTMLのページの上部に向けて固定入力フィールドを用意する必要があります（これは固定要素なので、とにかく上部近くに置くと意味的に意味があります）。

<!DOCTYPE HTML>

<html>

    <head>
      <title>Untitled</title>
    </head>

    <body>
        <form class="fixed-element">
            <input class="thing-causing-the-issue" type="text" />
        </form>

        <div class="everything-else">(content)</div>

    </body>

</html>

次に、現在のスクロール位置をグローバル変数に保存する必要があります。

//Always know the current scroll position
var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});

//need to be able to save current scroll pos while keeping actual scroll pos up to date
var savedScrollPos = scrollPos;

次に、修正を必要としないものに影響を与えないようにiOSデバイスを検出する方法が必要です（機能は https://stackoverflow.com/a/9039885/1611058 から取得します）

//function for testing if it is an iOS device
function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }

  return false;
}

必要なものはすべて揃ったので、ここで修正します:)

//when user touches the input
$('input[type=text]').on('touchstart', function(){

    //only fire code if it's an iOS device
    if (is_iOS()){

        //set savedScrollPos to the current scroll position
        savedScrollPos = scrollPos;

        //shift the body up a number of pixels equal to the current scroll position
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });

        //Hide all content outside of the top of the visible area
        //this essentially chops off the body at the position you are scrolled to so the browser can't scroll up any higher
        $('html').css('overflow','hidden');
    }
})

//when the user is done and removes focus from the input field
.blur(function(){

    //checks if it is an iOS device
    if (is_iOS()){

        //Removes the custom styling from the body and html attribute
        $('body, html').removeAttr('style');

        //instantly scrolls the page back down to where you were when you clicked on input field
        $(document).scrollTop(savedScrollPos);
    }
});
8
Daniel Tonon

必要な選択要素にイベントリスナーを追加し、問題の選択がフォーカスを取得したときに1ピクセルのオフセットでスクロールすることにより、選択入力のこれを修正できました。

これは必ずしも良い解決策ではありませんが、ここで見た他の答えよりもはるかにシンプルで信頼性があります。ブラウザは位置を再レンダリング/再計算するようです：修正済み; window.scrollBy（）関数で提供されるオフセットに基づく属性。

document.querySelector(".someSelect select").on("focus", function() {window.scrollBy(0, 1)});
4
user3411121

Mark Ryan Salleeが示唆したように、動的に高さとオーバーフローを変更することがわかりました背景要素が重要です-これはSafariにスクロールするものを何も与えません。

したがって、モーダルのオープニングアニメーションが終了したら、背景のスタイルを変更します。

$('body > #your-background-element').css({
  'overflow': 'hidden',
  'height': 0
});

モーダルを閉じると、元に戻ります。

$('body > #your-background-element').css({
  'overflow': 'auto',
  'height': 'auto'
});

他の答えはより単純なコンテキストでは有用ですが、私のDOMはあまりにも複雑で（SharePointに感謝）、絶対/固定位置スワップを使用できません。

2
Matthew Levy

きれいに？いや.

私は最近、固定ヘッダーの固定検索フィールドでこの問題を抱えていました。現時点でできる最善のことは、常にスクロール位置を変数に保持し、選択時に上部で固定するのではなく、固定要素の位置を絶対にすることですドキュメントのスクロール位置に基づく位置。

しかし、これは非常にく、正しい場所に着陸する前にまだ奇妙な前後スクロールが発生しますが、私が得ることができる最も近いものです。

他のソリューションでは、ブラウザのデフォルトのスクロールメカニズムをオーバーライドする必要があります。

1
Samuel

私は問題を抱えていました、コードの行の下で私のためにそれを解決しました-

html{

 overflow: scroll; 
-webkit-overflow-scrolling: touch;

}
0
Manoj Gorasya

この特定のバグに対処したことはありませんが、オーバーフローが発生する可能性があります。テキスト領域が表示されている（またはデザインに応じてアクティブになっている）ときの本文。これは、ブラウザをスクロールする「ダウン」する場所を与えないという効果があるかもしれません。

0
Mark Ryan Sallee

私のDOMは複雑で、動的な無限スクロールページがあるため、これらのソリューションはどれも役に立ちませんでした。そのため、独自のページを作成する必要がありました。

Background：固定ヘッダーと、ユーザーがその下までスクロールすると、その下に固定される要素を使用しています。この要素には検索入力フィールドがあります。さらに、前後スクロール中に動的ページが追加されます。

問題： iOSでは、ユーザーが固定要素の入力をクリックするたびに、ブラウザーはページの最上部までスクロールします。これは、望ましくない動作を引き起こしただけでなく、ページの上部に動的ページを追加するきっかけにもなりました。

予想される解決策：ユーザーがスティッキー要素の入力をクリックしても、iOSではスクロールしません（まったくなし）。

解決策：

     /*Returns a function, that, as long as it continues to be invoked, will not
    be triggered. The function will be called after it stops being called for
    N milliseconds. If `immediate` is passed, trigger the function on the
    leading Edge, instead of the trailing.*/
    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

     function is_iOS() {
        var iDevices = [
          'iPad Simulator',
          'iPhone Simulator',
          'iPod Simulator',
          'iPad',
          'iPhone',
          'iPod'
        ];
        while (iDevices.length) {
            if (navigator.platform === iDevices.pop()) { return true; }
        }
        return false;
    }

    $(document).on("scrollstop", debounce(function () {
        //console.log("Stopped scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'absolute');
                $('#searchBarDiv').css('top', yScrollPos + 50 + 'px'); //50 for fixed header
            }
            else {
                $('#searchBarDiv').css('position', 'inherit');
            }
        }
    },250,true));

    $(document).on("scrollstart", debounce(function () {
        //console.log("Started scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'fixed');
                $('#searchBarDiv').css('width', '100%');
                $('#searchBarDiv').css('top', '50px'); //50 for fixed header
            }
        }
    },250,true));

要件： startsrollおよびstopscroll関数が機能するには、JQuery mobileが必要です。

デバウンスは、スティッキー要素によって作成されたラグを滑らかにするために含まれています。

IOS10でテスト済み。

0
Dima

考えられる解決策は、入力フィールドを置き換えることです。

  • Divのクリックイベントを監視する
  • 非表示の入力フィールドにフォーカスしてキーボードをレンダリングします
  • 非表示の入力フィールドの内容を偽の入力フィールドに複製します
function focus() {
  $('#hiddeninput').focus();
}

$(document.body).load(focus);

$('.fakeinput').bind("click",function() {
    focus();
});

$("#hiddeninput").bind("keyup blur", function (){
  $('.fakeinput .placeholder').html(this.value);
});
#hiddeninput {
  position:fixed;
  top:0;left:-100vw;
  opacity:0;
  height:0px;
  width:0;
}
#hiddeninput:focus{
  outline:none;
}
.fakeinput {
  width:80vw;
  margin:15px auto;
  height:38px;
  border:1px solid #000;
  color:#000;
  font-size:18px;
  padding:12px 15px 10px;
  display:block;
  overflow:hidden;
}
.placeholder {
  opacity:0.6;
  vertical-align:middle;
}
<input type="text" id="hiddeninput"></input>

<div class="fakeinput">
    <span class="placeholder">First Name</span>
</div>

codepen

0
davidcondrey

昨日、＃bが表示されているときに#aの高さを最大表示高（私の場合は体の高さ）に設定して、このようなものを飛び越えました

例：

    <script>
    document.querySelector('#b').addEventListener('focus', function () {
      document.querySelector('#a').style.height = document.body.clientHeight;
    })
    </script>

ps：遅い例で申し訳ありませんが、それが必要であることに気づきました。

0
Onur Uyar