iOS Chrome/Safari - Modal içindeki bir girdiye odaklanırken istenmeyen kaydırma

Question

Safari ve Chrome'da test edildi - aynı sonuç, yani iOS sorunu olduğunu düşünüyorum.

Bu, yalnızca model içinde bir girdi varsa ve bu girdiye dokunursam olur. Aynı anda, bu giriş odaklanır ve yerel iOS klavyesi görünür hale gelir.

Aynı anda modal sayfanın sayfası otomatik olarak yüksekliğinin% 50'sine kaydırılır. Bu davranış tamamen istenmeyen ve bu varsayılan iOS "özelliği" nin nasıl önleneceği hakkında hiçbir fikrim yok.

Demo:

---

GÜNCELLEME: düzeltme taahhüt: Ben setTimeout ve setInterval neden kaydırma olayları ile sorun vardı iOS'ta limonte/sweetalert2/commit/4a2d36b

Answer 1

Bir çekime değecek İşte benzer bir sorunla karşı karşıyayız ve bu soru üzerine (mükemmel) demo sayfanızla karşılaştım.

Belirtildiği gibi, ofset her zaman sayfanızın yüksekliğinin ~% 50'sidir; bu, ilk ofsetinizin nerede olduğuna bakılmaksızın gerçekleşir. Daha önce iOS sürümleri ile benzer bir "atlama" (gerçi çok daha az dramatik atlama) gözlenen Geçmişte

, ben genellikle body ( this allows overflow: hidden to properly work) için position: fixed (veya relative) uygulayarak bu tür şeyler oldu. Ancak, bu, aşağı kaydırılmışlarsa, kullanıcıyı sayfanın başına geri atlamanın gözetimsiz sonucuna sahiptir. Bazı JavaScript bu konuyu ele açığız eğer

Yani, burada bir düzeltme var/Ben birlikte atılan ettik kesmek:

// Tapping into swal events 
onOpen: function() { 
    var offset = document.body.scrollTop; 
    document.body.style.top = (offset * -1) + 'px'; 
    document.body.classList.add('modal--opened'); 
}, 
onClose: function() { 
    var offset = parseInt(document.body.style.top, 10); 
    document.body.classList.remove('modal--opened'); 
    document.body.scrollTop = (offset * -1); 
} 

Ya CSS gibi görünür:

.modal--opened { 
    position: fixed; 
    left: 0; 
    right: 0; 
} 

Demo sayfanızın bir çatalı aşağıda açıklanmıştır: https://jpattishall.github.io/sweetalert2/ios-bug.html

Ve daha genel bir düzeltme arayanlar için aşağıdaki gibi bir şey yapabilirsiniz. tavuk açma/a kalıcı kapanış:

function toggleModal() { 
    var offset; 
    if (document.body.classList.contains('modal--opened')) { 
     offset = parseInt(document.body.style.top, 10); 
     document.body.classList.remove('modal--opened'); 
     document.body.scrollTop = (offset * -1); 
    } else { 
     offset = document.body.scrollTop; 
     document.body.style.top = (offset * -1) + 'px'; 
     document.body.classList.add('modal--opened'); 
    } 
} 

Düzenleme: Unutulmaması gereken bir şey körlemesine tüm cihazların/platformlar, sadece iOS Safari düzeltme geçerli değildi olmasıdır. Diğer bir sorunuzda, taşma hayranı olmadığınızı fark ettim: kaydırma çubuğu göründüğünde/kaybolduğunda sayfanın kaydırılması nedeniyle gizlendim (tamamen katılıyorum). JS'yi yalnızca iOS cihazlara uygulamanızı öneririm.

Answer 2

(modal kaydırma neden olur konumlandırmak ?). Aşağıdaki kodla bir yerde bir çözüm buldum. Burada aklınıza

Function.prototype.bind = function(parent) { 
    var f = this; 
    var args = []; 

    for (var a = 1; a < arguments.length; a++) { 
    args[args.length] = arguments[a]; 
    } 

    var temp = function() { 
    return f.apply(parent, args); 
    } 

    return(temp); 
} 


setTimeout(function() { 
    // your animation stuff here 
}.bind(this), 100); 

Answer 3

Bir şey muhtemelen koduna Fast Click kütüphane eklemektir. 300ms gecikmesi gibi bazı iOS ve Android zaman aşımı sorunları Hızlı Tıklama tarafından ele alınmaktadır.