Pemosisian tetap iOS 5 dan keyboard virtual


138

Saya memiliki situs web seluler yang memiliki div yang disematkan ke bagian bawah layar melalui posisi: tetap. Semua berfungsi dengan baik di iOS 5 (saya sedang menguji di iPod Touch) sampai saya berada di halaman dengan formulir. Saat saya masuk ke kolom input dan keyboard virtual muncul, tiba-tiba posisi div saya hilang. Div sekarang menggulir dengan halaman selama keyboard terlihat. Setelah saya mengklik Selesai untuk menutup keyboard, div kembali ke posisinya di bagian bawah layar dan mematuhi aturan posisi: tetap.

Apakah ada orang lain yang pernah mengalami perilaku seperti ini? Apakah ini diharapkan? Terima kasih.


Ya, tampaknya Apple tidak memikirkan yang satu ini dengan baik untuk iOS5. Semua elemen posisi tetap menjadi relatif terhadap halaman segera setelah keyboard virtual muncul. Mungkin akan baik-baik saja jika elemen dikembalikan ke posisi absolut karena ini tidak akan merusak tata letak. Sayangnya penempatan sebenarnya dari elemen-elemen ini jauh lebih sulit untuk diprediksi. Saya memiliki masalah yang persis seperti ini dengan tajuk tetap saya di [DITOLAK]. Gulir ke bawah halaman, lalu klik pada kotak pencarian dan bang ... tata letak rusak. Saya bahkan telah mencoba memperbaikinya dengan kembali ke pemosisian absolut pada acara fokus, yang berhasil tetapi kemudian saya kalah
John williams

2
Saya mengalami masalah yang sama ini. Adakah yang melaporkan bug ke Apple untuk mengetahui cara memperbaikinya? Selain itu, apakah ada orang lain yang melihat perilaku ini berlanjut di iOS6?
Robert Hui

1
Saya mengalami masalah yang sama dengan iOS6.
Redtopia

24
Masalah yang sama sepertinya masih ada di iOS7!
Ria Weyprecht

5
Tampaknya tidak diperbaiki di iOS 8 ...
contactmatt

Jawaban:


49

Saya memiliki masalah ini dalam aplikasi saya. Inilah cara saya mengatasinya:

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

Saya hanya menggulir ke atas dan memposisikannya di sana, sehingga pengguna iOS tidak melihat sesuatu yang aneh sedang terjadi. Gabungkan ini dalam beberapa deteksi agen pengguna sehingga pengguna lain tidak mendapatkan perilaku ini.


Secara harfiah menemukan masalah ini hari ini dan ini tampaknya yang paling masuk akal, +1.
Daniel

3
Ini bekerja dengan cukup baik. Saya hanya memanggil ini untuk perangkat iOS: var isIOS = /(iPadi>iPhonei>iPod)/g.test(navigator.userAgent);
Redtopia

8
Saya juga menghapus $ (window) .scrollTop (0) ... Saya rasa ini tidak diperlukan dan menyebabkan scrolling yang tidak diinginkan.
Redtopia

1
Atau document.body.scrollTop = 0jika Anda tidak menggunakan jQuery dan menargetkan browser terbaru.
Langdon

Pada formulir yang lebih panjang, pengaturan $(window).scrollTop(0);dapat menyebabkan input yang difokuskan dipindahkan dari layar misalnya input lebih jauh ke bawah halaman, atau jika iPhone dalam potret. Solusi yang lebih baik adalah pada set fokus header.css({position:'absolute',top:window.pageYOffset+'px'});dan pada set blur header.css({position:'fixed',top:0});.
robocat

16

Saya memiliki masalah ipad yang sedikit berbeda di mana keyboard virtual mendorong viewport saya ke atas dari layar. Kemudian setelah pengguna menutup keyboard virtual, viewport saya masih di luar layar. Dalam kasus saya, saya melakukan sesuatu seperti berikut:

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

3
Tidak membantu untuk saya :(
Dmitry

@Tokopedia turut berduka cita. Itu untuk masalah tertentu yang saya alami di ios6 dan perangkat yang lebih rendah. Saya belum mengunjungi lagi sejak itu.
ds111

14

Ini adalah kode yang kami gunakan untuk memperbaiki masalah dengan ipad. Ini pada dasarnya mendeteksi perbedaan antara offset dan posisi gulir - yang berarti 'tetap' tidak berfungsi dengan benar.

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

Ini dari plugin jquery.timers. Anda dapat menggunakan window.setTimeout sebagai gantinya.
Menetas

memicu fungsi yang sama pada input blur dan fokus juga akan membantu.
Blowsie

Jenius - benar-benar gali ini. Juga saran +1 untuk @ Blowsie untuk menggunakan fokus dan buram ini daripada menggulir.
Skone

12

Elemen posisi tetap tidak memperbarui posisinya saat keyboard naik. Saya menemukan bahwa dengan mengelabui Safari dengan berpikir bahwa halaman telah diubah ukurannya, elemen akan memposisikan ulang dirinya sendiri. Ini tidak sempurna, tetapi setidaknya Anda tidak perlu khawatir tentang beralih ke 'posisi: mutlak' dan melacak perubahan sendiri.

Kode berikut hanya mendengarkan kapan pengguna kemungkinan besar akan menggunakan keyboard (karena input sedang difokuskan), dan sampai mendengar kabur itu hanya mendengarkan setiap kejadian gulir dan kemudian melakukan trik mengubah ukuran. Sepertinya bekerja cukup baik untuk saya sejauh ini.

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

Ini sebenarnya tidak berfungsi untuk saya di iPad. Saya akhirnya mengubah posisi footer tetap menjadi relatif dan meletakkan footer di bagian bawah halaman sampai peristiwa input blur terdeteksi ketika saya mengubah posisi kembali ke tetap.
Akrikos

6
Tidak berfungsi lagi, iOS mungkin memperbaiki bug apa pun yang membuat ini berfungsi
Kevin

6

Untuk berjaga-jaga jika seseorang terjadi pada utas ini seperti yang saya lakukan saat meneliti masalah ini. Saya menemukan utas ini membantu dalam merangsang pemikiran saya tentang masalah ini.

Ini adalah solusi saya untuk ini pada proyek terbaru. Anda hanya perlu mengubah nilai "targetElem" menjadi pemilih jQuery yang mewakili header Anda.

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

};

Ada sedikit penundaan dalam perbaikan berlangsung karena iOS menghentikan manipulasi DOM saat sedang bergulir, tetapi itu berhasil ...


Ini berfungsi dengan baik hingga iOS 7. Adakah orang lain yang mengalami masalah dengan elemen yang diposisikan dengan benar tetapi menghilang?
Rona Kilmer

@RonaKilmer Ubah initmenjadi fungsi biasa (tidak memanggil sendiri; ini diaktifkan terlalu dini). Kemudian panggil iOSKeyboardFix.init();tepat sebelum akhir ifpernyataan.
biaya

@cfree Terima kasih, saya telah menerapkannya beberapa waktu yang lalu tetapi itu bukan masalah saya. Ada hal lain yang sedang terjadi. Salah satu elemen tetap saya menghilang saat diposisikan ulang. Yang lainnya tidak. Saya tidak bisa menyalahkan itu pada perbaikan keyboard karena tidak terjadi di mana-mana. Saya belum melihat ada orang lain yang mengalami masalah yang sama, jadi saya harus menggali lebih dalam.
Rona Kilmer

4

Tidak ada jawaban lain yang saya temukan untuk bug ini yang berhasil untuk saya. Saya dapat memperbaikinya hanya dengan menggulir halaman kembali ke atas sebesar 34px, jumlah safari seluler menggulirnya ke bawah. dengan jquery:

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

Ini jelas akan berlaku di semua browser, tetapi mencegahnya rusak di iOS.


4

Masalah ini sangat mengganggu.

Saya menggabungkan beberapa teknik yang disebutkan di atas dan menghasilkan ini:

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

Saya memiliki dua bilah navigasi tetap (header dan footer, menggunakan twitter bootstrap). Keduanya bertingkah aneh saat keyboard naik dan aneh lagi setelah keyboard turun.

Dengan perbaikan berwaktu / tertunda ini, ini berfungsi. Saya masih menemukan kesalahan sesekali, tetapi tampaknya cukup baik untuk menunjukkannya kepada klien.

Beri tahu saya jika ini berhasil untuk Anda. Jika tidak, kami mungkin dapat menemukan yang lain. Terima kasih.


2
Anda tampaknya tidak memerlukan waktu tunggu itu (setidaknya itu berfungsi dengan baik untuk saya tanpa), dan jika juga terjadi pada elemen tertentu, selain itu solusi ini berfungsi dengan baik.
Phillip Gooch

3

Saya mengalami masalah yang sama dengan iOS7. Elemen tetap bawah akan mengacaukan pandangan saya yang tidak fokus dengan benar.

Semua mulai bekerja ketika saya menambahkan tag meta ini ke html saya.

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

Bagian yang membuat perbedaan adalah:

height=device-height

Harapan yang membantu seseorang.


Terima kasih @pasevin. Ini memperbaiki masalah saya di iOS 9.3.2
stillatmylinux

3

Saya sudah mengambil Jory Cunningham jawaban dan memperbaikinya:

Dalam banyak kasus, bukan hanya satu elemen yang menjadi gila, tetapi beberapa elemen yang diposisikan tetap, jadi dalam kasus ini, targetElem harus berupa objek jQuery yang memiliki semua elemen tetap yang ingin Anda "perbaiki". Ho, ini sepertinya membuat keyboard iOS hilang jika Anda menggulir ...

Perlu disebutkan, Anda harus menggunakan acara dokumen SETELAHDOM ready ini atau tepat sebelum </body>tag penutup .

(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 maaf, saya tidak tahu Anda adalah 'master chef'
Mike

ketika memilih, fokus masukan saat itu header bergerak ke atas (tidak terlihat). Saya ingin memperbaiki div header saat memilih fokus dan memasukkan file. ada yang tolong bantu saya
VK Chikkadamalla

2

Saya memiliki solusi yang mirip dengan @NealJMD kecuali milik saya hanya mengeksekusi untuk iOS dan benar menentukan offset gulir dengan mengukur scollTop sebelum dan sesudah pengguliran keyboard asli serta menggunakan setTimeout untuk memungkinkan pengguliran asli terjadi:

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

Saya telah memperbaiki posisi tetap konten tata letak utama Ipad saya dengan cara ini:

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

Ini bekerja dengan sangat baik bagi saya dalam JQUery UI Dialog dan on-screen Keyboard mixup yang membuat tata letak saya setengah layar saat dialog dan keyboard ditutup pada saat yang sama, meskipun dengan beberapa pengeditan: var main = $ (' body div '). first (); ... dan ... function mainHeightChanged () {$ (top) .scrollTop (0); }
Awerealis

1
setInterval... Betulkah? lebih baik tetap bersama bug daripada melakukan ini
vsync

1

Saya memiliki masalah yang mirip dengan @ ds111 s. Situs web saya didorong ke atas oleh keyboard tetapi tidak bergerak ke bawah saat keyboard ditutup.

Pertama saya mencoba solusi @ ds111 tetapi saya memiliki dua inputbidang. Tentu saja, pertama-tama keyboard hilang, kemudian keburaman terjadi (atau semacamnya). Jadi yang keduainput berada di bawah keyboard, ketika fokus dialihkan langsung dari satu input ke input lainnya.

Selain itu, "jump up" tidak cukup baik untuk saya karena seluruh halaman hanya seukuran ipad. Jadi saya membuat gulungan itu mulus.

Akhirnya, saya harus melampirkan event listener ke semua input, bahkan yang saat ini tersembunyi, karenanya live .

Secara keseluruhan saya dapat menjelaskan cuplikan javascript berikut sebagai: Lampirkan pemroses acara blur berikut ke saat ini dan semua yang akan datang inputdan textarea(= live): Tunggu masa tenggang (= window.setTimeout(..., 10)) dan gulir dengan lancar ke atas (= animate({scrollTop: 0}, ...)) tetapi hanya jika "tidak ada keyboard ditampilkan "(= 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)
})

Ketahuilah, bahwa masa tenggang (= 10) mungkin terlalu pendek atau keyboard mungkin masih ditampilkan meskipun tidak ada inputatau textareasedang dalam fokus. Tentu saja, jika Anda ingin scrolling lebih cepat atau lebih lambat, Anda dapat menyesuaikan durasi (= 400)


1

benar-benar bekerja keras untuk menemukan solusi ini, yang singkatnya mencari fokus dan mengaburkan peristiwa pada masukan, dan menggulir untuk secara selektif mengubah posisi bilah tetap saat peristiwa terjadi. Ini antipeluru, dan mencakup semua kasus (menavigasi dengan <>, gulir, tombol selesai). Catatan id = "nav" adalah div footer tetap saya. Anda dapat dengan mudah mem-port ini ke js standar, atau jquery. Ini adalah dojo bagi mereka yang menggunakan perkakas listrik ;-)

definisikan (["dojo / siap", "dojo / kueri",], fungsi (siap, kueri) {

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

});

}); // akhir mendefinisikan


Ini mungkin luar biasa ... porting ke jQuery / js & akan melaporkan kembali. Selain itu, solusi dalam pilihan bahasa skrip khusus yang memerlukan porting atau menambahkan alat nonstandar ke sebuah proyek, dapat diprediksi, tidak akan dianggap berguna secara universal.
ericpeters0n

Ini tidak akan berfungsi untuk setiap kasus karena ini akan menggulung Anda ke posisi 'statis' elemen, yang bisa jadi bermil-mil jauhnya dari posisi awal masukan Anda, terutama jika itu dalam wadah tetap. Jika penampung memiliki overflow:hiddenaturan, Anda tidak akan melihat masukan Anda sama sekali karena sekarang berada di luar kotak.
James M. Lay

1

Ini adalah masalah yang sulit untuk mendapatkan jawaban yang 'benar'. Anda dapat mencoba dan menyembunyikan footer pada fokus elemen input, dan menampilkan blur, tetapi itu tidak selalu dapat diandalkan di iOS. Seringkali (satu dari sepuluh, katakanlah, pada iPhone 4S saya) acara fokus sepertinya gagal menyala (atau mungkin ada kondisi balapan), dan footer tidak disembunyikan.

Setelah banyak trial and error, saya menemukan solusi menarik ini:

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

Intinya: gunakan JavaScript untuk menentukan tinggi jendela perangkat, lalu buat kueri media CSS secara dinamis untuk menyembunyikan footer saat tinggi jendela menyusut 10 piksel. Karena membuka keyboard mengubah ukuran tampilan browser, ini tidak pernah gagal di iOS. Karena menggunakan mesin CSS daripada JavaScript, ini jauh lebih cepat dan lebih lancar juga!

Catatan: Saya menemukan menggunakan 'visibility: hidden' less glitchy than 'display: none' atau 'position: static', tetapi jarak tempuh Anda mungkin berbeda.


1
Anda mungkin perlu beralih antara tinggi dan lebar untuk memperbaikinya untuk mode potret dan lanskap.
Neil Monroe

1

Bekerja untuk saya

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

Dalam kasus kami, ini akan memperbaiki dirinya sendiri segera setelah pengguna menggulir. Jadi ini adalah perbaikan yang kami gunakan untuk mensimulasikan gulir blurpada salah satu inputatau textarea:

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

1

Jawaban saya adalah tidak bisa dilakukan.

Saya melihat 25 jawaban tetapi tidak ada yang berhasil dalam kasus saya. Itulah mengapa Yahoo dan halaman lain menyembunyikan header tetap saat keyboard aktif. Dan Bing mengubah seluruh halaman menjadi non-scrollable (overflow-y: hidden).

Kasus yang dibahas di atas berbeda, beberapa memiliki masalah saat menggulir, beberapa di fokus atau kabur. Beberapa memiliki footer tetap, atau header. Saya tidak dapat menguji setiap kombinasi sekarang, tetapi Anda mungkin akhirnya menyadari bahwa itu tidak dapat dilakukan dalam kasus Anda.


Ini tidak menjawab pertanyaan itu.
orang baru

4
Ya, karena jawabannya tidak ada solusi.
Szalai Laci


0

Seandainya ada yang ingin mencoba ini. Saya mendapatkan yang berikut ini untuk saya di footer tetap dengan inputfield di dalamnya.

<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

Saya memiliki masalah yang sama. Tetapi saya menyadari bahwa posisi tetap hanya tertunda dan tidak rusak (setidaknya untuk saya). Tunggu 5-10 detik dan lihat apakah div menyesuaikan kembali ke bagian bawah layar. Saya yakin ini bukan kesalahan, tetapi respons yang tertunda saat keyboard terbuka.


0

Saya mencoba semua pendekatan dari utas ini, tetapi jika tidak membantu, hasilnya malah lebih buruk. Pada akhirnya, saya memutuskan untuk memaksa perangkat kehilangan fokus:

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

dan itu bekerja seperti pesona dan memperbaiki formulir masuk lengket saya.

Harap CATATAN:

  1. Kode JS di atas hanya untuk mempresentasikan ide saya, untuk mengeksekusi potongan ini harap ganti nilai dalam tanda kurung siku (<>) dengan nilai yang sesuai untuk situasi Anda.
  2. Kode ini dirancang untuk digunakan jQuery v1.10.2

0

Ini masih merupakan bug besar untuk setiap halaman HTML dengan Bootstrap Modals yang lebih tinggi di iOS 8.3. Tak satu pun dari solusi yang diusulkan di atas berfungsi dan setelah memperbesar bidang apa pun di bawah lipatan modal tinggi, Mobile Safari dan / atau WkWebView akan memindahkan elemen tetap ke tempat gulungan badan HTML berada, membiarkannya tidak sejajar dengan tempat sebenarnya. di mana ditata.

Untuk mengatasi bug tersebut, tambahkan event listener ke salah satu modal input Anda seperti:

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

Saya menduga ini berhasil karena memaksa tinggi gulir tubuh HTML menyelaraskan kembali tampilan sebenarnya dengan di mana iOS 8 WebView mengharapkan konten div modal tetap berada.


0

Jika ada yang mencari rute yang sama sekali berbeda (seperti Anda bahkan tidak ingin menyematkan div "footer" ini saat Anda menggulir tetapi Anda hanya ingin div tetap di bagian bawah halaman), Anda dapat mengatur posisi footer sebagai relatif.

Artinya, meskipun keyboard virtual muncul di browser seluler Anda, footer Anda akan tetap tertambat di bagian bawah halaman, tidak mencoba bereaksi terhadap tampilan atau penutupan keyboard virtual.

Jelas terlihat lebih baik di Safari jika posisinya diperbaiki dan footer mengikuti halaman saat Anda menggulir ke atas atau ke bawah tetapi karena bug aneh ini di Chrome, kami akhirnya beralih ke hanya membuat footer relatif.


0

Tidak ada solusi gulir yang tampaknya berhasil untuk saya. Alih-alih, yang berhasil adalah menyetel posisi badan menjadi tetap saat pengguna mengedit teks dan kemudian mengembalikannya ke statis saat pengguna selesai. Ini membuat safari tidak menggulir konten Anda pada Anda. Anda dapat melakukan ini baik pada fokus / blur elemen (ditampilkan di bawah untuk satu elemen tetapi bisa untuk semua input, textareas), atau jika pengguna melakukan sesuatu untuk mulai mengedit seperti membuka modal, Anda dapat melakukannya itu pada tindakan itu (misalnya buka / tutup modal).

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

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

0

iOS9 - masalah yang sama.

TLDR - sumber masalahnya. Untuk solusi, gulir ke bawah

Saya memiliki formulir dalam position:fixediframe dengan id = 'subscribe-popup-frame'

Sesuai pertanyaan awal, pada fokus input, iframe akan ditempatkan di bagian atas dokumen, bukan di bagian atas layar.

Masalah yang sama tidak terjadi dalam mode pengembang safari dengan agen pengguna disetel ke idevice. Jadi sepertinya masalahnya disebabkan oleh keyboard virtual iOS saat muncul.

Saya mendapat beberapa visibilitas tentang apa yang terjadi dengan konsol mencatat posisi iframe (misalnya $('#subscribe-popup-frame', window.parent.document).position()) dan dari sana saya dapat melihat iOS tampaknya mengatur posisi elemen ke {top: -x, left: 0}saat keyboard virtual muncul (yaitu difokuskan pada elemen input).

Jadi solusi saya adalah mengambil sial itu -x, membalikkan tandanya dan kemudian menggunakan jQuery untuk menambahkan topposisi itu kembali ke iframe. Jika ada solusi yang lebih baik, saya akan senang mendengarnya tetapi setelah mencoba lusinan pendekatan berbeda, hanya itu yang berhasil untuk saya.

Kekurangan: Saya perlu menetapkan batas waktu 500ms (mungkin lebih sedikit akan berfungsi tetapi saya ingin aman) untuk memastikan saya menangkap nilai akhir xsetelah iOS melakukan kerusakannya dengan posisi elemen. Akibatnya, pengalaman itu sangat tersentak-sentak. . . tapi setidaknya itu berhasil

Larutan

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

Kemudian panggil saja mobileInputRepositionsesuatu seperti $('your-input-field).focus(function(){})dan$('your-input-field).blur(function(){})

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.