iOS8 Safari -webkit-overflow-kaydırma: dokunma; issue

Question

Bu yüzden, iOS7'de Safari'de mükemmel bir şekilde çalışan bir istemci için bu web uygulamasını oluşturuyoruz. Ancak, uygulamayı iOS8'de kontrol ettiğimizde, bazı büyük hatalar vardı. Bir <section style="overlay-y: scroll;"></section> kaybolana (Kaplanmış parçası) olduğu

kullanıcı kenar çubuğunu açar ve kapatır

• , içeriği.
• Bazı düğmeler herhangi bir nedenle çalışmayı durdurdu. (<a href="">Lala</a>)

biz konteyner (tüm içeriği tutan div) den -webkit-overflow-scrolling: touch; kaldırmak herşey eskisi sorunsuz gibi çalışır ... ne olabilir üzerinde

Herhangi bir fikir?

Answer 1

Aynı sorunu yaşıyorum! Şimdiye kadar gerçek bir çözüm bulmak değil, ama daha az ideal olmayan geçici çözüm vardır:

varsayarsak #container -webkit-overflow-scrolling: touch özelliği ayarlanmış, bu jQuery size yardımcı olmalıdır:

$('#container').css('-webkit-overflow-scrolling','auto'); 

Ya (denenmemiş) javascript için:

document.getElementById('container').style.webkitOverflowScrolling = 'auto'; 

Bu sayfadaki pürüzsüz rulet tarzı kaydırmayı devre dışı bırakır. Yani bu ideal değil, ancak sayfanız doğru bir şekilde kaydırılmalı.

Düzenleme: pürüzsüz dokunmatik kaydırma çalışma tutarken

Bazı daha fazla araştırma daha hacky şekilde bizim keşfine yol açan bu sorunu çözmek için. Css'de bir yerde -webkit-overflow-scrolling: touch olduğunu varsayarak, onu kendi JS'nizde "değiştirebilir". Menüde neleri gösterdiğinden/sakladığından emin değilim, ama umarım bunu kullanabilirsiniz.

function toggleMenu(){ 
    $('#container').css('-webkit-overflow-scrolling','auto'); 

    //...Existing code 

    setTimeout(function() { 
     $('#container').css('-webkit-overflow-scrolling','touch'); 
    },500); 
} 

Bu, setTimeout olmadan benim için çalışmadı. Umarım bu size yardımcı olabilir veya başka biri.

Answer 2

iOS8'de bu sorunların tıklatma olayına bağlanan tüm düğmelerimin düzgün çalışmadığını görüyordum. Genelde 300 ms gecikmeli olacağız ama bazı noktalarda tetiklemeyi sağlamak için birkaç kez daha fazla basmam gerekecek.

Ayrıca, benim üzerinde çalışan bu çözümü de buldum. Tıklama ile dokunma ekleme.

button.on('click touchend', function(event) { 
    // this fires twice on touch devices 
}); 

Burada tartıştıkları forumu görebilirsiniz.

JavaScript touchend versus click dilemma

Ben bu yardımı umuyoruz.

Answer 3

Kenar çubuğunuz CSS animasyonları ile animasyonlu bir şekilde canlandırılıyor mu?

Aynı hatayı Cordova web uygulamasında da vardı.Bazı Deneme yaparken sonra sorun css animasyonlar ile animasyonlu ve bu mülkiyet sorununu çözdü Çıkarma özelliğini animation-fill-mode: forwards;

vardı ve beklenen restore ediliyordu ebeveyn <div> (kenar çubuğu) neden olduğunu tespit -webkit-overflow-scrolling: touch davranış

Answer 4

Benim cevabım ise:

$('#container').css('-webkit-overflow-scrolling','auto'); 

Önceki çözüm işe yaramadı:

document.getElementById('container').style.webkitOverflowScrolling = 'auto';