iOS 5の固定配置と仮想キーボード


138

私は、position:fixedを介して画面の下部にdivが固定されているモバイルWebサイトを持っています。フォームのあるページを表示するまで、iOS 5(iPod Touchでテストしています)ではすべて正常に動作します。入力フィールドをタップして仮想キーボードが表示されると、divの固定位置が突然失われます。キーボードが表示されている限り、divはページとともにスクロールします。[完了]をクリックしてキーボードを閉じると、divは画面下部の位置に戻り、position:fixedルールに従います。

他の誰かがこのような行動を経験しましたか?これは予想されますか?ありがとう。


はい、AppleはこれをIOS5に対してあまりよく考えていなかったようです。仮想キーボードが表示されるとすぐに、固定位置の要素はページに対して相対的になります。要素が絶対位置に戻ったとしても、レイアウトが壊れないので、おそらく問題ありません。残念ながら、これらの要素の実際の配置ははるかに予測可能ではありません。[編集済み]の修正済みヘッダーにこの問題があります。ページを下にスクロールして、検索ボックスをクリックすると、レイアウトが壊れます。フォーカスイベントの絶対配置に戻して修正しようとしてもうまくいきましたが、失敗しました
ジョンウィリアムズ

2
私はこれと同じ問題に遭遇しました。誰かがこれを修正することについて確認するためにアップルにバグを提出しましたか?また、この動作がiOS6でも継続しているのを見た人はいますか?
Robert Hui

1
iOS6でも同じ問題が発生しています。
Redtopia 2013

24
同じ問題がiOS7にも存在するようです!
Ria Weyprecht 2013年

5
iOS 8では修正されていないようです...
contactmatt

回答:


49

私のアプリケーションでこの問題が発生しました。これが私がそれを回避する方法です:

input.on('focus', function(){
    header.css({position:'absolute'});
});
input.on('blur', function(){
    header.css({position:'fixed'});
});

私は上にスクロールしてそこに配置しているだけなので、iOSユーザーは奇妙なことに気づきません。これを一部のユーザーエージェント検出でラップして、他のユーザーがこの動作を行わないようにします。


文字通り、今日この問題に出くわしました、そしてこれは最も合理的であると思われました、+ 1。
Daniel

3
これはかなりうまくいきます。私はこれをiOSデバイスに対してのみ呼び出します:var isIOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
Redtopia 2013年

8
$(window).scrollTop(0)...も削除しました。必要ではないと思われ、不要なスクロールが発生しました。
Redtopia 2013年

1
あるいは単にdocument.body.scrollTop = 0、jQueryを使用しておらず、最新のブラウザをターゲットにしている場合。
ラングドン2014年

長いフォームでは、を設定$(window).scrollTop(0);すると、フォーカスされた入力が画面の外に移動する可能性があります。より良い解決策は、フォーカスセットheader.css({position:'absolute',top:window.pageYOffset+'px'});とぼかしセットheader.css({position:'fixed',top:0});です。
robocat 2015

16

仮想キーボードがビューポートを画面外に押し上げる、わずかに異なるiPadの問題がありました。その後、ユーザーが仮想キーボードを閉じた後、ビューポートはまだ画面外にありました。私の場合、私は次のようなことをしました:

var el = document.getElementById('someInputElement');
function blurInput() {
    window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);

3
私には役に立たない:(
Dmitry

@Altaveron。ごめんなさい。それは私がios6以下のデバイスで抱えていた特定の問題のためでした。それ以来、私は再訪していません。
ds111 2014

14

これは、iPadの問題を修正するために使用するコードです。基本的には、オフセットとスクロール位置の不一致を検出します。つまり、「修正済み」が正しく機能していません。

$(window).bind('scroll', function () {
    var $nav = $(".navbar")
    var scrollTop = $(window).scrollTop();
    var offsetTop = $nav.offset().top;

    if (Math.abs(scrollTop - offsetTop) > 1) {
        $nav.css('position', 'absolute');
        setTimeout(function(){
            $nav.css('position', 'fixed');
        }, 1);
    }
});

それはjquery.timersプラグインからのものです。代わりにwindow.setTimeoutを使用できます。
2013

入力ブラーとフォーカスでこれと同じ機能をトリガーすることも役立ちます。
ブロージー2013年

天才-本当にこれを掘る。また、スクロールではなくフォーカスとブラーを使用するという@Blowsieの提案に+1します。
Skone

12

位置が固定された要素は、キーボードが上にあるときに位置を更新しません。ただし、ページのサイズが変更されたとSafariをだまして考えさせると、要素が自動的に再配置されることがわかりました。完璧ではありませんが、少なくとも「絶対位置」に切り替えて自分で変更を追跡することについて心配する必要はありません。

次のコードは、ユーザーがキーボードを使用する可能性が高いとき(入力がフォーカスされているため)をリッスンし、ぼかしが聞こえるまでは、スクロールイベントをリッスンしてから、サイズ変更のトリックを実行します。これまでのところ、私にはかなりうまく機能しているようです。

    var needsScrollUpdate = false;
    $(document).scroll(function(){
        if(needsScrollUpdate) {
            setTimeout(function() {
                $("body").css("height", "+=1").css("height", "-=1");
            }, 0);
        }
    });
    $("input, textarea").live("focus", function(e) {
        needsScrollUpdate = true;
    });

    $("input, textarea").live("blur", function(e) {
        needsScrollUpdate = false;
    });

これは実際にはiPadでは機能しませんでした。最終的に、固定フッターの位置を相対位置に変更し、位置を固定に戻したときに入力ブラーイベントが検出されるまで、ページの下部にフッターを表示しました。
Akrikos 2012

6
動作しなくなりました。iOSはおそらくこの動作をするバグを修正しました
Kevin

6

この問題の調査中に私がしたように誰かがこのスレッドで発生した場合に備えて。このスレッドは、この問題に対する私の考えを刺激するのに役立ちました。

これが最近のプロジェクトでの私の解決策でした。「targetElem」の値を、ヘッダーを表すjQueryセレクターに変更するだけです。

if(navigator.userAgent.match(/iPad/i) != null){

var iOSKeyboardFix = {
      targetElem: $('#fooSelector'),
      init: (function(){
        $("input, textarea").on("focus", function() {
          iOSKeyboardFix.bind();
        });
      })(),

      bind: function(){
            $(document).on('scroll', iOSKeyboardFix.react);  
                 iOSKeyboardFix.react();      
      },

      react: function(){

              var offsetX  = iOSKeyboardFix.targetElem.offset().top;
              var scrollX = $(window).scrollTop();
              var changeX = offsetX - scrollX; 

              iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});

              $('input, textarea').on('blur', iOSKeyboardFix.undo);

              $(document).on('touchstart', iOSKeyboardFix.undo);
      },

      undo: function(){

          iOSKeyboardFix.targetElem.removeAttr('style');
          document.activeElement.blur();
          $(document).off('scroll',iOSKeyboardFix.react);
          $(document).off('touchstart', iOSKeyboardFix.undo);
          $('input, textarea').off('blur', iOSKeyboardFix.undo);
      }
};

};

スクロール中にiOSがDOM操作を停止するため、修正の適用が少し遅れますが、トリックは行われます...


これはiOS 7まではうまく機能します。要素が適切に配置されているのに表示が消える問題が他にありますか?
Rona Kilmer 2013年

@RonaKilmerをinit通常の関数に変更します(自己起動ではなく、起動が早すぎます)。次にiOSKeyboardFix.init();ifステートメントの終わりの直前に呼び出します。
cfree 2013年

@cfreeありがとう、しばらく前に実装しましたが、それは私の問題ではありません。何か他のことが起こっています。固定要素の1つが再配置されると消えます。もう1つはしません。それはどこでも起こっていないので、キーボードの修正にそれを責めることはできません。他の誰もが同じ問題を抱えているのを見たことがないので、もっと深く掘り下げる必要があります。
ロナキルマー2013年

4

このバグについて私が見つけた他の答えはどれも私にとってはうまくいきませんでした。ページを34px上にスクロールするだけで修正できました。モバイルサファリが下にスクロールする量です。jqueryで:

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

これは明らかにすべてのブラウザーで有効になりますが、iOSでの破損を防ぎます。


4

この問題は本当に厄介です。

私は上記のテクニックのいくつかを組み合わせてこれを思いつきました:

$(document).on('focus', 'input, textarea', function() {
    $('.YOUR-FIXED-DIV').css('position', 'static');
});

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        $('.YOUR-FIXED-DIV').css('position', 'fixed');
        $('body').css('height', '+=1').css('height', '-=1');
    }, 100);
});

2つの固定ナビゲーションバーがあります(Twitterブートストラップを使用したヘッダーとフッター)。どちらもキーボードがアップしているときは奇妙に振る舞い、キーボードがダウンした後は再び変な振る舞いをしました。

この時限/遅延修正で機能します。私は時々まだグリッチを見つけますが、それをクライアントに示すのに十分なようです。

これで問題が解決するかどうかお知らせください。そうでなければ、他の何かを見つけることができるかもしれません。ありがとう。


2
あなたはそのタイムアウトを必要としないようです(少なくともそれがなければ私にとってはうまく機能していました)。また、選択した要素でも発生する場合は、このソリューションがうまく機能することを除けば。
Phillip Gooch 2013

3

iOS7でも同じ問題が発生しました。下部の固定要素が適切にフォーカスされず、ビューが混乱します。

このメタタグをHTMLに追加すると、すべてが機能し始めました。

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

違いを生んだ部分は次のとおりです。

height=device-height

それが誰かを助けることを願っています。


@pasevinに感謝します。これにより、iOS 9.3.2の私の問題が修正されました
stillatmylinux

3

私は取りました Jory Cunningham答えを、それを改善しました:

多くの場合、クレイジーになるのは1つの要素だけではなく、いくつかの固定された要素なので、この場合、 targetElem「修正」したいすべての固定要素を持つjQueryオブジェクトにする必要があります。ほら、スクロールするとiOSキーボードが消えてしまうようです...

言うまでもなく、このAFTERドキュメントDOM readyイベントまたは終了</body>タグの直前を使用する必要があります。

(function(){
    var targetElem = $('.fixedElement'), // or more than one
        $doc       = $(document),
        offsetY, scrollY, changeY;

    if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
        return;

    $doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);

    function bind(){
        $(window).on('scroll.iOSKeyboardFix', react);
        react();
    }

    function react(){
        offsetY = targetElem.offset().top;
        scrollY = $(window).scrollTop();
        changeY = offsetY - scrollY;

        targetElem.css({'top':'-'+ changeY +'px'});

        // Instead of the above, I personally just do:
        // targetElem.css('opacity', 0);

        $doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
            .on('touchend.iOSKeyboardFix', unbind);
    }

    function unbind(){
        targetElem.removeAttr('style');
        document.activeElement.blur();

        $(window).off('scroll.iOSKeyboardFix');
        $doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
    }
})();

2
@vsync謝罪、あなたが「マスターシェフ」であることを知りませんでした
Mike

選択すると、その時間ヘッダーの入力フォーカスが上に移動します(表示されません)。
どなた

2

私は@NealJMDに似たソリューションを持っていますが、私の場合はiOSでのみ実行され、ネイティブキーボードスクロールの前後にscollTopを測定し、setTimeoutを使用してネイティブスクロールを発生させることで、スクロールオフセットを正しく決定します。

var $window = $(window);
var initialScroll = $window.scrollTop();
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
  setTimeout(function () {
    $window.scrollTop($window.scrollTop() + (initialScroll - $window.scrollTop()));
  }, 0);
}

1

Ipadのメインレイアウトコンテンツの固定位置を次のように修正しました:

var mainHeight;
var main = $('.main');

// hack to detects the virtual keyboard close action and fix the layout bug of fixed elements not being re-flowed
function mainHeightChanged() {
    $('body').scrollTop(0);
}

window.setInterval(function () {
    if (mainHeight !== main.height())mainHeightChanged();
    mainHeight = main.height();
}, 100);

これは、ダイアログとキーボードが同時に閉じられたときにレイアウトが画面の半分の位置に残った複雑なJQUery UIダイアログとオンスクリーンキーボードの組み合わせで、私にとっては非常にうまくいきましたが、いくつかの編集があります:var main = $( ' body div ')。first(); ...そして... function mainHeightChanged(){$(top).scrollTop(0); }
Awerealis 2013年

1
setInterval... 本当に?これを行うよりもバグにとどまる方が良い
vsync

1

@ ds111と同様の問題がありました。私のウェブサイトはキーボードによって押し上げられましたが、キーボードを閉じても下に移動しませんでした。

最初に@ ds111ソリューションを試しましたが、2つのinputフィールドがありました。もちろん、最初にキーボードが消え、次にぼかしが発生します(またはそのようなもの)。そのため、2つ目inputはフォーカスが1つの入力から別の入力に直接切り替わったときにキーボードの下にありました。

さらに、ページ全体がipadのサイズしかないため、「ジャンプアップ」では十分ではありませんでした。それで、巻物をスムーズにしました。

最後に、現在非表示になっているすべての入力にイベントリスナーをアタッチする必要がありましたlive

現在および将来のすべてに、次のぼかしイベントリスナーをアタッチ:すべて一緒に私はとして次のJavaScriptスニペットを説明することができますinputし、textarea(= live):猶予期間(=待ちwindow.setTimeout(..., 10)(=)とスムーズにトップにスクロールanimate({scrollTop: 0}, ...))が、何のキーボードがないだけ「場合示されている」(= if($('input:focus, textarea:focus').length == 0))。

$('input, textarea').live('blur', function(event) {
    window.setTimeout(function() {
        if($('input:focus, textarea:focus').length == 0) {
            $("html, body").animate({ scrollTop: 0 }, 400);
        }
    }, 10)
})

猶予期間(= 10)が短すぎるか、キーボードが表示されないinputtextarea、フォーカスされているにもかかわらず、表示される場合があることに注意してください。もちろん、スクロールを速くまたは遅くしたい場合は、継続時間(= 400)を調整できます


1

入力でフォーカスイベントとブラーイベントを探すこの回避策を見つけるために本当に努力し、イベントが発生したときにスクロールして固定バーの位置を選択的に変更しました。これは防弾であり、すべてのケースをカバーします(<>、スクロール、完了ボタンで移動)。id = "nav"は私の固定フッターdivです。これを標準のjsまたはjqueryに簡単に移植できます。これは電動工具を使う人にとって道場です;-)

define(["dojo / ready"、 "dojo / query"、]、function(ready、query){

ready(function(){

    /* This addresses the dreaded "fixed footer floating when focusing inputs and keybard is shown" on iphone 
     * 
     */
    if(navigator.userAgent.match(/iPhone/i)){
        var allInputs = query('input,textarea,select');
        var d = document, navEl = "nav";
        allInputs.on('focus', function(el){
             d.getElementById(navEl).style.position = "static";
        });

        var fixFooter = function(){
            if(d.activeElement.tagName == "BODY"){
                d.getElementById(navEl).style.position = "fixed";
            }
        };
        allInputs.on('blur', fixFooter);
        var b = d.body;
        b.addEventListener("touchend", fixFooter );
    }

});

}); //終了定義


これは素晴らしいかもしれません... jQuery / jsへの移植&レポートします。余談ですが、非標準のツールをプロジェクトに移植または追加する必要のあるニッチなスクリプト言語の選択肢のソリューションは、予想通り、普遍的に役立つとは言えません。
ericpeters0n 2014年

これは、要素の「静的」位置にスクロールするため、すべてのケースで機能するわけではありません。特に、固定コンテナ内にある場合は、入力の元の位置から数マイル離れている可能性があります。コンテナにoverflow:hiddenルールがある場合、ボックスの外側にあるため、入力はまったく表示されません。
James M. Lay

1

これは「正しく」理解するのが難しい問題です。入力要素のフォーカスでフッターを非表示にしてぼかしで表示することもできますが、iOSでは常に信頼できるとは限りません。頻繁に(たとえば、私のiPhone 4Sでは10回に1回)、フォーカスイベントが発生しない(または競合状態が発生している)ようで、フッターが非表示になりません。

多くの試行錯誤の後、私はこの興味深い解決策を思いつきました:

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

基本的に、JavaScriptを使用してデバイスのウィンドウの高さを決定し、ウィンドウの高さが10ピクセル縮小したときにフッターを非表示にするCSSメディアクエリを動的に作成します。キーボードを開くとブラウザの表示のサイズが変更されるため、iOSでは失敗しません。JavaScriptではなくCSSエンジンを使用しているため、はるかに高速でスムーズです。

注:「visibility:hidden」を使用した方が「display:none」や「position:static」よりグリッチが少ないことがわかりましたが、実際の距離は異なる場合があります。


1
縦長モードと横長モードの両方でこれを修正するには、高さと幅を切り替える必要がある場合があります。
Neil Monroe、

1

私のために働く

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}

1

私たちの場合、これはユーザーがスクロールするとすぐに自動的に修正されます。だから、これは我々が上スクロールをシミュレートするために使用してきた修正であるblur任意の上inputtextarea

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

1

私の答えはそれができないということです。

25件の回答が表示されますが、私の場合は何も機能しません。キーボードがオンになっていると、Yahooなどのページで固定ヘッダーが非表示になるのはそのためです。そして、Bingはページ全体をスクロール不可能にします(overflow-y:hidden)。

上記で説明したケースは異なり、スクロール時に問題が発生したり、フォーカスやぼかしが発生したりします。一部には固定フッターまたはヘッダーがあります。私は今、それぞれの組み合わせをテストすることはできませんが、あなたのケースではそれができないことに気づくかもしれません。


これは質問の答えにはなりません。
新生物、2017

4
答えは解決策がないということなので、そうなります。
Szalai Laci 2017

0

このソリューションはGithubで見つかりました。

https://github.com/Simbul/baker/issues/504#issuecomment-12821392

スクロール可能なコンテンツがあることを確認してください。

// put in your .js file
$(window).load(function(){
    window.scrollTo(0, 1);
});

// min-height set for scrollable content
<div id="wrap" style="min-height: 480px">
  // website goes here
</div>

追加のボーナスとして、アドレスバーが折りたたまれます。


0

誰かがこれを試したかった場合に備えて。inputfieldが含まれている固定フッターで次のように機能します。

<script>
    $('document').ready(
        function() {
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
                  || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();

                $('#notes').live('focus', function() {
                    if (documentHeight > windowHeight) {
                        $('#controlsContainer').css({
                            position : 'absolute'
                        });
                        $("html, body").animate({
                            scrollTop : $(document).height()
                        }, 1);
                    }
                });
                $('#notes').live('blur', function() {
                    $('#controlsContainer').css({
                        position : 'fixed'
                    });
                    $("html, body").animate({
                        scrollTop : 0
                    }, 1);
                });
            }
        });
</script>

0

同じ問題があります。しかし、私は固定位置が(少なくとも私にとっては)遅れているだけで壊れていないことに気づきました。5〜10秒待って、divが画面の下部に戻るかどうかを確認します。これはエラーではなく、キーボードが開いているときの応答の遅れだと思います。


0

私はこのスレッドからすべてのアプローチを試しましたが、それらが役に立たなかった場合、さらに悪い結果になりました。最後に、私はデバイスにフォーカスを失うことを強制することを決定しました:

$(<selector to your input field>).focus(function(){
    var $this = $(this);
    if (<user agent target check>) {
        function removeFocus () {
            $(<selector to some different interactive element>).focus();
            $(window).off('resize', removeFocus);
        }
        $(window).on('resize', removeFocus);
    }
});

そしてそれは魅力のように働き、私の粘着性のあるログインフォームを修正しました。

注意してください

  1. 上記のJSコードは私のアイデアを提示するためだけのものです。このスニペットを実行するには、角括弧(<>)の値を状況に応じた適切な値に置き換えてください。
  2. このコードは、 jQuery v1.10.2

0

これは、iOS 8.3のBootstrap Modalsがより高いHTMLページの大きなバグです。上記の提案された解決策はどれも機能せず、背の高いモーダルの折りたたみの下のフィールドを拡大した後、モバイルサファリまたはWkWebViewは、HTMLボディのスクロールが配置されていた場所に固定要素を移動し、実際の場所と位置がずれたままになりますレイアウト。

バグを回避するには、次のようなモーダル入力のいずれかにイベントリスナーを追加します。

$(select.modal).blur(function(){
  $('body').scrollTop(0);
});

HTMLボディのスクロール高さを強制すると実際のビューがiOS 8 WebViewが固定モーダルdivのコンテンツであると想定する場所に再調整されるため、これはうまくいくと思います。


0

誰かが完全に異なるルートを探していた場合(スクロールするときにこの「フッター」のdivを固定するつもりはないが、divをページの下部に留めておきたい場合など)は、フッターの位置を次のように設定できます。相対的。

つまり、モバイルブラウザーで仮想キーボードが表示されても、フッターはページの下部に固定されたままで、仮想キーボードの表示やクローズに反応することはありません。

Safariでは、位置が固定されており、フッターが上下にスクロールするとページに追随するように見えるのは明らかですが、Chromeのこの奇妙なバグのため、フッターを相対にするだけに切り替えました。


0

スクロールソリューションはどれも私にはうまくいかないようです。代わりに、機能したのは、ユーザーがテキストを編集している間、本文の位置を固定に設定し、ユーザーが完了したらテキストを静的に戻すことです。これにより、Safariがコンテンツをスクロールしなくなります。これは、要素のフォーカス/ぼかし(単一要素の場合は下に表示されますが、すべての入力、textareasの場合もあります)、またはユーザーがモーダルを開くなどの編集を開始するために何かをしている場合に実行できます。そのアクション(たとえば、モーダルオープン/クローズ)

$("#myInput").on("focus", function () {
    $("body").css("position", "fixed");
});

$("#myInput").on("blur", function () {
    $("body").css("position", "static");
});

0

iOS9-同じ問題。

TLDR-問題の原因。解決策は、下にスクロールしてください

にフォームがありました position:fixedID = 'subscribe-popup-frame'のiframeに

元の質問のとおり、入力フォーカスでは、iframeは画面の上部ではなくドキュメントの上部に移動します。

同じ問題は、ユーザーエージェントがideviceに設定されているSafari開発モードでも発生しませんでした。だからそれはそれがポップアップしたときにiOS仮想キーボードが原因であるようです。

コンソールがiframeの位置をログに記録することで何が起こっているのかをある程度$('#subscribe-popup-frame', window.parent.document).position()確認できました(例:)。そこから、iOS {top: -x, left: 0}が仮想キーボードがポップアップしたとき(つまり、入力要素にフォーカスしたとき)に要素の位置を設定しているように見えました。

だから私の解決策はその厄介なことをすることでした -x、符号を逆にしてから、jQueryを使用してそのtop位置をiframeに戻すことでした。より良い解決策があればそれを聞きたいと思いますが、数十の異なるアプローチを試した後、それが私のために働いた唯一のものでした。

欠点:x iOSが要素の位置に悪影響を及ぼすと、最終値を確実にキャプチャするために、タイムアウトを500ミリ秒に設定する必要がありました(これよりも少ないと安全です)。その結果、体験は非常にぎくしゃくします。。。しかし、少なくともそれは動作します

解決

        var mobileInputReposition = function(){
             //if statement is optional, I wanted to restrict this script to mobile devices where the problem arose
            if(screen.width < 769){
                setTimeout(function(){
                    var parentFrame = $('#subscribe-popup-frame',window.parent.document);
                    var parentFramePosFull = parentFrame.position();
                    var parentFramePosFlip = parentFramePosFull['top'] * -1;
                    parentFrame.css({'position' : 'fixed', 'top' : parentFramePosFlip + 'px'});
                },500);
            }    
        }   

それからちょうど呼び出すmobileInputRepositionようなものに$('your-input-field).focus(function(){})し、$('your-input-field).blur(function(){})

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.