Korkunç gecikme her şeyden önce paralaks etkisi

Question

kullanarak, burada tarif etmek üzereyim sorunu olan siteme bir bağlantı:

Firefox, IE 9, Opera, Safari'de http://themes.roussounelosweb.gr/cassiopeia/

, iOS web sitesi mükemmel görünüyor ve sorunsuz çalışıyor. Sorun, kaydırma işleminin inanılmaz derecede sarsıldığı Chrome ve Android cihazlarda yatıyor ve paralaks efekti kullanan arka plan resimleri de kopyalanabilir.

Sorunun arka plan boyutunda olduğunu düşündüğüm: kapak ve arka plan eki: resimlerimin sabit özellikleri, ancak bu soruna henüz bir çözüm bulamadım.

İlk elden görebilir ve yukarıdaki bağlantıdan daha iyi bir fikir edinebilirsiniz. Lütfen yardım et; Bu projeyi bitirmek için son adımlara geldim ve bu hata beni gerçekten geride tutuyor.

section{ 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment:fixed; 
overflow:hidden; 
} 

section.section1{ 

background-image:url(../img/section1.jpg); 
background-repeat:no-repeat; 
color:#dedede; 
text-shadow:1px 1px 5px rgba(0,0,0,0.8); 
position:relative; 
padding:20px 0px; 
z-index:1; 
overflow:hidden; 
} 

Answer 1

Sorununuzun CSS'de değil, JS'de olduğuna inanmıyorum.

İlk olarak, parallax.js ile birlikte nicescroll kullanıyorsunuz. Bu ikisi birbiriyle çelişiyor olabilir - JS'nizden nicescroll'u kaldırmaya çalışın ve daha iyi olup olmadığını kontrol edin. Sen 33 zamanlayıcılar Eğer Kaydırırken kovuyor musun

:

İkincisi, geliştiricilerin aracı zaman aralığıyla çerçeve etkinliklerini analiz sen çerçeveler damla tam noktayı görebilirsiniz. Muhtemelen kodunuzda küçük bir hata ayıklama, kaydırma olayından bir kerede bir geri çağrıyı çözme ve sorunlu olanı kontrol etmeyi deneyebilirsiniz.

GÜNCELLEME:

Robert sağ yorumların içinde var düşünüyorum: En arka ağır bulunmaktadır. Zaten büyük ve CPU yoğun bir sayfa olduğundan, tarayıcı, bu büyük öğeler üzerinde paralaks zorlukla ele alır sanırım. Daha düşük kalitede küçültmeyi, sıkıştırmayı ve kaydetmeyi deneyin.