การวางตำแหน่ง iOS 5 แบบคงที่และแป้นพิมพ์เสมือนจริง

ฉันมีเว็บไซต์สำหรับมือถือที่มี div ที่ตรึงไว้ที่ด้านล่างของหน้าจอผ่านตำแหน่ง: แก้ไขแล้ว ทุกอย่างทำงานได้ดีใน iOS 5 (ฉันกำลังทดสอบบน iPod Touch) จนกว่าฉันจะอยู่บนหน้าที่มีฟอร์ม เมื่อฉันแตะลงในช่องป้อนข้อมูลและแป้นพิมพ์เสมือนจะปรากฏขึ้นทันใดนั้นตำแหน่งคงที่ของ div ของฉันจะหายไป ตอนนี้ div จะเลื่อนพร้อมกับหน้าตราบเท่าที่แป้นพิมพ์มองเห็นได้ เมื่อฉันคลิกเสร็จสิ้นเพื่อปิดแป้นพิมพ์ div จะเปลี่ยนกลับไปที่ตำแหน่งที่ด้านล่างของหน้าจอและปฏิบัติตามตำแหน่ง: กฎถาวร

มีใครเคยประสบพฤติกรรมเช่นนี้บ้างไหม? คาดหวังหรือไม่ ขอบคุณ

ฉันพบปัญหานี้ในแอปพลิเคชันของฉัน นี่คือวิธีที่ฉันทำงานอยู่:

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

ฉันแค่เลื่อนไปที่ด้านบนและวางตำแหน่งไว้ที่นั่นดังนั้นผู้ใช้ iOS จะไม่สังเกตเห็นสิ่งแปลก ๆ เกิดขึ้น ปิดสิ่งนี้ในการตรวจสอบตัวแทนผู้ใช้บางรายเพื่อให้ผู้ใช้รายอื่นไม่ได้รับพฤติกรรมนี้

ฉันมีปัญหาเกี่ยวกับ iPad ที่แตกต่างออกไปเล็กน้อยซึ่งคีย์บอร์ดเสมือนผลักดันวิวพอร์ตของฉันให้สูงขึ้นนอกจอ จากนั้นหลังจากผู้ใช้ปิดแป้นพิมพ์เสมือนจริงวิวพอร์ตของฉันยังคงปิดหน้าจอ ในกรณีของฉันฉันทำอะไรแบบนี้:

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

นี่คือรหัสที่เราใช้เพื่อแก้ไขปัญหากับ 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);
    }
});

องค์ประกอบคงที่ของตำแหน่งไม่อัปเดตตำแหน่งเมื่อคีย์บอร์ดขึ้น ฉันพบว่าด้วยการหลอกให้ 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;
    });

ในกรณีที่มีใครบางคนเกิดขึ้นกับหัวข้อนี้เหมือนที่ฉันทำในขณะที่ค้นคว้าปัญหานี้ ฉันพบว่าหัวข้อนี้มีประโยชน์ในการกระตุ้นการคิดของฉันเกี่ยวกับปัญหานี้

นี่คือทางออกของฉันสำหรับสิ่งนี้ในโครงการล่าสุด คุณเพียงแค่เปลี่ยนค่าของ "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 ในขณะที่เลื่อน แต่มันทำเคล็ดลับ ...

ไม่มีคำตอบอื่น ๆ ที่ฉันพบสำหรับข้อผิดพลาดนี้ได้ผลสำหรับฉัน ฉันสามารถแก้ไขได้โดยเพียงเลื่อนหน้าสำรอง 34px จำนวนซาฟารีสำหรับมือถือเลื่อนลง ด้วย jquery:

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

สิ่งนี้เห็นได้ชัดว่าจะมีผลบังคับใช้ในเบราว์เซอร์ทั้งหมด แต่จะป้องกันไม่ให้เกิดการแตกหักใน iOS

ปัญหานี้น่ารำคาญจริงๆ

ฉันรวมเทคนิคดังกล่าวข้างต้นบางอย่างและเกิดขึ้นกับสิ่งนี้:

$(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);
});

ฉันมี navbars คงที่สองตัว (ส่วนหัวและส่วนท้ายโดยใช้ twitter bootstrap) ทั้งสองทำหน้าที่แปลก ๆ เมื่อคีย์บอร์ดขึ้นและแปลกอีกครั้งหลังจากคีย์บอร์ดหยุดทำงาน

ด้วยการแก้ไขหมดเวลา / ล่าช้านี้มันทำงาน ฉันยังคงพบความผิดพลาดเป็นครั้งคราว แต่ดูเหมือนจะดีพอที่จะแสดงให้ลูกค้าเห็น

แจ้งให้เราทราบว่าสิ่งนี้เหมาะกับคุณหรือไม่ ถ้าไม่เราอาจพบสิ่งอื่น ขอบคุณ

ฉันประสบปัญหาเดียวกันกับ 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

หวังว่าจะช่วยใครซักคน

ฉันได้Jory Cunninghamรับคำตอบและปรับปรุง:

ในหลายกรณีไม่ใช่เพียงองค์ประกอบเดียวที่บ้าคลั่ง แต่มีองค์ประกอบหลายตำแหน่งที่คงที่ดังนั้นในกรณีนี้targetElemควรเป็นวัตถุ jQuery ที่มีองค์ประกอบคงที่ทั้งหมดที่คุณต้องการ "แก้ไข" ดูเหมือนว่านี่จะทำให้แป้นพิมพ์ iOS หายไปหากคุณเลื่อน ...

ไม่จำเป็นต้องพูดถึงคุณควรใช้เหตุการณ์เอกสารหลัง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');
    }
})();

ฉันมีวิธีแก้ไขคล้ายกับ @NealJMD ยกเว้นของฉันจะประมวลผลเฉพาะสำหรับ iOS และกำหนดค่า offset ของสโครลได้อย่างถูกต้องโดยการวัด 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);
}

ฉันได้แก้ไขตำแหน่งเค้าโครงเนื้อหาหลักของ 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);

ฉันมีปัญหาคล้ายกับ @ ds111 s เว็บไซต์ของฉันถูกผลักโดยคีย์บอร์ด แต่ไม่ได้เลื่อนลงเมื่อปิดคีย์บอร์ด

ก่อนอื่นฉันลอง @ ds111 solution แต่ฉันมีสองinputฟิลด์ แน่นอนว่าก่อนอื่นคีย์บอร์ดจะหายไปจากนั้นความพร่ามัวจะเกิดขึ้น (หรืออะไรทำนองนั้น) ดังนั้นที่สองinputจึงอยู่ใต้คีย์บอร์ดเมื่อโฟกัสเปลี่ยนจากอินพุตหนึ่งไปยังอีกโดยตรง

นอกจากนี้ "การกระโดด" ไม่ดีพอสำหรับฉันเพราะทั้งหน้ามีขนาดเท่า iPad เท่านั้น ดังนั้นฉันจึงทำให้การเลื่อนราบรื่น

liveสุดท้ายผมต้องแนบฟังเหตุการณ์ต่อปัจจัยการผลิตทั้งหมดแม้กระทั่งผู้ที่ถูกซ่อนอยู่ในปัจจุบันด้วยเหตุนี้

ทั้งหมดเข้าด้วยกันฉันสามารถอธิบายตัวอย่าง JavaScript ต่อไปนี้เป็น: แนบฟังเหตุการณ์ blur ต่อไปนี้เพื่อปัจจุบันและอนาคต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) อาจสั้นเกินไปหรือแป้นพิมพ์อาจยังแสดงอยู่แม้ว่าจะไม่มีinputหรือtextareaโฟกัสอยู่ แน่นอนถ้าคุณต้องการเลื่อนเร็วขึ้นหรือช้าลงคุณอาจปรับระยะเวลา (= 400)

ทำงานหนักมากเพื่อหาวิธีแก้ปัญหานี้ซึ่งในระยะสั้นจะมองหาโฟกัสและเบลอเหตุการณ์ในอินพุตและการเลื่อนเพื่อเลือกการเปลี่ยนตำแหน่งของแถบคงที่เมื่อมีเหตุการณ์เกิดขึ้น นี่คือกระสุนและครอบคลุมทุกกรณี (การนำทางด้วย <>, เลื่อน, ปุ่มเสร็จสิ้น) Note id = "nav" คือ div ท้ายกระดาษคงที่ของฉัน คุณสามารถนำพอร์ตนี้ไปที่ js มาตรฐานหรือ jquery ได้อย่างง่ายดาย นี่คือ dojo สำหรับผู้ที่ใช้เครื่องมือไฟฟ้า ;-)

define (["dojo / ready", "dojo / 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 );
    }

});

}); // end define

นี่เป็นปัญหาที่ยากที่จะรับ 'ถูกต้อง' คุณสามารถลองซ่อนส่วนท้ายของโฟกัสองค์ประกอบอินพุตและแสดงเป็นภาพเบลอ แต่นั่นก็ไม่ได้เป็นที่เชื่อถือได้เสมอบน iOS บ่อยครั้ง (ครั้งเดียวในสิบครั้งบน iPhone 4S ของฉัน) เหตุการณ์การโฟกัสดูเหมือนจะล้มเหลว (หรืออาจจะมีสภาพการแข่งขัน) และส่วนท้ายไม่ถูกซ่อน

หลังจากลองผิดลองถูกมาหลายครั้งฉันพบวิธีแก้ปัญหาที่น่าสนใจนี้:

<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 เพื่อกำหนดความสูงของหน้าต่างของอุปกรณ์จากนั้นสร้างคิวรี่สื่อ CSS แบบไดนามิกเพื่อซ่อนส่วนท้ายเมื่อความสูงของหน้าต่างลดขนาดลง 10 พิกเซล เนื่องจากการเปิดแป้นพิมพ์จะปรับขนาดการแสดงผลของเบราว์เซอร์จึงไม่เคยล้มเหลวใน iOS เพราะมันใช้เอ็นจิ้น CSS แทน JavaScript มันเร็วกว่าและราบรื่นกว่าด้วย!

หมายเหตุ: ฉันพบว่าใช้ 'การมองเห็น: ซ่อน' ความผิดพลาดน้อยกว่า 'จอแสดงผล: ไม่มี' หรือ 'ตำแหน่ง: คงที่' แต่ระยะทางของคุณอาจแตกต่างกันไป

ได้ผลสำหรับฉัน

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'});
    });
}

ในกรณีของเรานี้จะแก้ไขตัวเองทันทีที่ผู้ใช้เลื่อน ดังนั้นนี่คือการแก้ไขที่เราใช้เพื่อจำลองการเลื่อนblurบนใด ๆinputหรือtextarea:

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

คำตอบของฉันคือมันไม่สามารถทำได้

ฉันเห็น 25 คำตอบ แต่ไม่มีงานในกรณีของฉัน นั่นเป็นเหตุผลที่ Yahoo และหน้าอื่น ๆ ซ่อนส่วนหัวคงที่เมื่อเปิดแป้นพิมพ์ และ Bing เปลี่ยนทั้งหน้าไม่สามารถเลื่อนได้ (overflow-y: hidden)

กรณีที่กล่าวถึงข้างต้นนั้นแตกต่างกันไปบางคนมีปัญหาเมื่อเลื่อนบางคนมีโฟกัสหรือเบลอ บางคนมีส่วนท้ายคงที่หรือส่วนหัว ฉันไม่สามารถทดสอบแต่ละชุดค่าผสมได้ แต่คุณอาจพบว่ามันไม่สามารถทำได้ในกรณีของคุณ

พบวิธีแก้ปัญหานี้ใน 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>

แถบที่อยู่จะพับเป็นโบนัสเพิ่ม

ในกรณีที่ทุกคนต้องการลอง ฉันได้รับการทำงานต่อไปนี้สำหรับฉันในส่วนท้ายคงที่กับ 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>

ฉันมีปัญหาเดียวกัน แต่ฉันรู้ว่าตำแหน่งคงที่เพิ่งล่าช้าและไม่แตกหัก (อย่างน้อยสำหรับฉัน) รอ 5-10 วินาทีและดูว่า div ปรับกลับไปที่ด้านล่างของหน้าจอหรือไม่ ฉันเชื่อว่าไม่ใช่ข้อผิดพลาด แต่เป็นการตอบสนองที่ล่าช้าเมื่อเปิดแป้นพิมพ์

ฉันลองวิธีทั้งหมดจากกระทู้นี้ แต่ถ้าพวกเขาไม่ช่วยพวกเขาก็ยิ่งแย่ ในที่สุดฉันตัดสินใจบังคับให้อุปกรณ์หลุดโฟกัส:

$(<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

สิ่งนี้ยังคงเป็นจุดบกพร่องขนาดใหญ่สำหรับหน้า HTML ใด ๆ ที่มี Bootstrap Modals สูงใน iOS 8.3 ไม่มีของโซลูชั่นที่นำเสนอข้างต้นทำงานและหลังการซูมในสาขาใด ๆ ด้านล่างพับของกิริยาสูงมือถือ Safari และ / หรือ WkWebView จะย้ายองค์ประกอบคงที่ไปยังที่ที่เลื่อนเนื้อหา HTML ที่ตั้งอยู่ออกจากพวกเขา misaligned กับที่พวกเขาจริงที่ เลย์เอาต์

หากต้องการแก้ไขข้อบกพร่องให้เพิ่มผู้ฟังเหตุการณ์ลงในอินพุต modal ใด ๆ ของคุณเช่น:

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

ฉันคาดเดาว่าจะได้ผลเพราะบังคับให้ความสูงการเลื่อนของเนื้อหาใน HTML ปรับมุมมองจริงให้ตรงกับที่ iOS 8 WebView คาดว่าเนื้อหาของ modal div จะเป็นแบบคงที่

หากใครก็ตามกำลังมองหาเส้นทางที่แตกต่างไปจากเดิมอย่างสิ้นเชิง (เช่นคุณไม่ต้องการแม้แต่จะปักหมุด "ท้ายกระดาษ" นี้ในขณะที่คุณเลื่อน แต่คุณต้องการให้ div อยู่ที่ด้านล่างของหน้า) คุณสามารถกำหนดตำแหน่งท้ายกระดาษเป็น ญาติ

นั่นหมายความว่าแม้ว่าแป้นพิมพ์เสมือนจะปรากฏขึ้นบนเบราว์เซอร์มือถือของคุณส่วนท้ายของคุณจะคงอยู่ที่ด้านล่างของหน้าไม่พยายามตอบโต้กับการแสดงหรือปิดแป้นพิมพ์เสมือนจริง

เห็นได้ชัดว่ามันดูดีขึ้นสำหรับ Safari หากตำแหน่งได้รับการแก้ไขและส่วนท้ายตามหน้าขณะที่คุณเลื่อนขึ้นหรือลง แต่เนื่องจากข้อผิดพลาดแปลก ๆ นี้บน Chrome เราจึงสิ้นสุดการสลับเป็นเพียงแค่ทำส่วนท้ายญาติ

ไม่มีวิธีแก้ปัญหาการเลื่อนที่เหมาะกับฉัน สิ่งที่ใช้ได้คือการกำหนดตำแหน่งของร่างกายให้คงที่ในขณะที่ผู้ใช้กำลังแก้ไขข้อความและคืนค่าให้เป็นแบบคงที่เมื่อผู้ใช้เสร็จสิ้น สิ่งนี้จะป้องกันไม่ให้ซาฟารีเลื่อนเนื้อหาของคุณ คุณสามารถทำได้ทั้งแบบโฟกัส / เบลอขององค์ประกอบ (ที่แสดงด้านล่างสำหรับองค์ประกอบเดียว แต่อาจสำหรับอินพุตทั้งหมด, textareas) หรือหากผู้ใช้กำลังทำบางอย่างเพื่อเริ่มการแก้ไขเช่นการเปิดตัวเป็นโมดัลคุณสามารถทำได้ ในการกระทำนั้น (เช่น modal open / close)

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

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

iOS9 - ปัญหาเดียวกัน

TLDR - แหล่งที่มาของปัญหา สำหรับวิธีการแก้ปัญหาเลื่อนไปด้านล่าง

ฉันมีแบบฟอร์มใน position:fixed iframe ที่มี id = 'Subscribe-popup-frame'

ตามคำถามเดิมอินพุตโฟกัส iframe จะไปที่ด้านบนของเอกสารตรงข้ามกับด้านบนของหน้าจอ

ปัญหาเดียวกันไม่ได้เกิดขึ้นในโหมดซาฟารี dev ที่มีตัวแทนผู้ใช้ที่ตั้งค่าเป็นอุปกรณ์ ดังนั้นดูเหมือนว่าปัญหาเกิดจากคีย์บอร์ดเสมือน iOS เมื่อมันปรากฏขึ้น

ฉันมองเห็นสิ่งที่เกิดขึ้นโดยการบันทึกคอนโซลตำแหน่งของ iframe (เช่น$('#subscribe-popup-frame', window.parent.document).position()) และจากนั้นฉันเห็น iOS ดูเหมือนจะตั้งตำแหน่งขององค์ประกอบ{top: -x, left: 0}เมื่อแป้นพิมพ์เสมือนโผล่ขึ้นมา (เช่นเพ่งความสนใจไปที่องค์ประกอบอินพุต)

ดังนั้นวิธีการแก้ปัญหาของฉันคือการใช้สิ่งที่น่ารำคาญ-xกลับเครื่องหมายและใช้ jQuery เพื่อเพิ่มtopตำแหน่งนั้นกลับไปที่ iframe หากมีวิธีการแก้ปัญหาที่ดีกว่าฉันชอบที่จะได้ยินมัน แต่หลังจากลองใช้แนวทางที่แตกต่างกันหลายสิบครั้งมันก็เป็นวิธีเดียวที่เหมาะกับฉัน

ข้อเสียเปรียบ:ฉันจำเป็นต้องตั้งค่าการหมดเวลาของ 500ms (อาจจะทำงานได้น้อยลง แต่ฉันต้องการที่จะปลอดภัย) เพื่อให้แน่ใจว่าฉันได้รับxค่าสุดท้ายหลังจาก iOS ได้ทำอันตรายกับตำแหน่งขององค์ประกอบ เป็นผลให้ประสบการณ์นั้นกระตุกมาก . . แต่อย่างน้อยก็ใช้งานได้

สารละลาย

        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(){})