Safari

2015-02-02 56 views
5

-webkit-convert uyguladıktan sonra bir div içinde kaydırılamıyor Bir slayt menüsü oluşturuyorum.Safari

Menü uzun ve içeride kaydırma yapabilmem gerekiyor, bu yüzden overflow-y'yi ayarladım: üzerine kaydırma.

Geçiş özelliği olarak -webkit-transform (ve diğer tarayıcılarda varyantlar) kullanıyorum.

Artık divun üstünde gezinemediğim zaman, kaydırma çubuğunu kullanarak tüm sayfanın kaydırmasını sağlayacağım.

Menünün davranışını değiştirir ve doğru özelliği değiştirirseniz (menüyü sağa çevirirseniz: -320px ve onu yeniden sağa döndürme: 0), kaydırma çalışır.

Bu hata yalnızca Safari'de yaşanıyor, Chrome ve diğer tarayıcılarda sorunsuz çalışıyor. IOS'ta da çalışır.

Bir geçici çözüm bilen var mı? Bu sorunu daha önce hiç kimse yaşadı mı? Bunun hakkında herhangi bir bilgi bulamıyorum. Teşekkür ederim.

+2

biraz araştırma yaptıktan sonra, ben Safari div sınırlama kutusu (kayıt kabul ettiğini bulundu:

Bu (el animasyon uygulandığı DOM öğesidir) benim için sorun giderilmiştir geçiş davranışı) geçişin gerçekleşmesinden önceki div pozisyonu olması. Başka bir deyişle, farenizi çevirmeden önce div'a yerleştirirseniz ve kaydırma çubuğunu kullanırsanız, artık orada olmasa bile div içinde gezinebilirsiniz. Yine de bir geçici çözüm bulmamıza rağmen ... –

+0

Aynı sorunu yaşıyorum. bir çözüm buldun mu? –

cevap

12

transition ve overflow: scroll yerine overflow: auto yerine animation kullandığım farkla aynı sorunu yaşadım.

function fixSafariScrolling(event) { 
    event.target.style.overflowY = 'hidden'; 
    setTimeout(function() { event.target.style.overflowY = 'auto'; }); 
} 

el.addEventListener('webkitAnimationEnd', fixSafariScrolling); 
+0

Güzel biri, teşekkürler! Ben div elementini (ör: içindeki içeriği değiştirerek) "canlandırıcı" sorunu çözeceğini fark etmiştim. Çözümünüz daha iyi. –

+0

Bu benim de öncülüğümdü. Adam, her tarayıcıda bir web sitesi çalışması yapmak çok zor ...;)) –

+0

Teşekkürler, bu benim için çalışıyor gibi görünüyor. çok. (Ben 'webkitTransitionEnd', btw.) – Pascal