iPad Safari kaydırma HTML öğelerinin bir gecikmeyle kaybolmasına ve yeniden görünmesine neden oluyor

Şu anda iPad Safari için html5 ve jQuery kullanarak bir web uygulaması geliştiriyorum. Ben geniş kaydırma alanları onlara aşağı kaydırdığınızda bir gecikmeden sonra ekran dışı öğeleri görünmesine neden bir sorunla karşılaşıyorum.

Bununla kastettiğim, ekran dışında bir görüntü dizisi (hatta gradyanlı bir div) varsa, aşağı kaydırdığımda (veya yukarı), beklenen davranış , öğenin ekranda görünmesi için Ona kaydırıyorum.

Ancak, gördüğüm şey, parmağımı ekrandan kaldırana ve kaydırma çubuğunun tüm animasyonlarını bitirene kadar öğenin görünmemesidir .

Bu benim için süper fark edilebilir bir soruna neden oluyor, her şey dalgalı görünmesine rağmen, öyle olmasa da. İPad Safari'nin hafızadan tasarruf etmek için bir şeyler yapmaya çalıştığını tahmin ediyorum. Bu dalgalılığın olmasını önleyebileceğim bir yol var mı? Ayrıca, iPad Safari'nin gerçekte yapmaya çalıştığı şeye ışık tutabildiğini de takdir ediyorum.

Donanım hızlandırmayı daha etkili kullanmak için tarayıcıyı kandırmanız gerekir. Bunu boş bir 3d dönüşümü ile yapabilirsiniz:

-webkit-transform: translate3d(0,0,0)

Özellikle, bir position:relative;bildirimi olan alt öğelerde buna ihtiyacınız olacaktır (ya da sadece dışarı çıkın ve tüm alt öğelere yapın).

Garantili bir düzeltme değil, ancak çoğu zaman oldukça başarılı.

Şapka ipucu: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Sorumun tam cevabı bu. Başlangıçta @Colin Williams'ın cevabını doğru cevap olarak işaretledim, çünkü tam çözüme ulaşmama yardımcı oldu. Bir topluluk üyesi olan @Slipp D. Thompson, 2,5 yıl sonra sorduğumda sorumu düzenledi ve bana SO'nun Soru-Cevap biçimini kötüye kullandığımı söyledi. Ayrıca bunu ayrı olarak cevap olarak göndermemi söyledi. İşte sorunumu çözen tam cevap:

@Colin Williams, teşekkür ederim! Cevabınız ve bağlantı verdiğiniz makale bana CSS ile bir şeyler denememizi sağladı.

Daha önce translate3d kullanıyordum. İstenmeyen sonuçlar verdi. Temel olarak, onlarla etkileşimde bulunana kadar, ekran dışı olan öğeleri kesip DEĞİL. Yani, temel olarak, yatay yönde, sitemin ekran dışında kalan yarısı gösterilmiyordu. Bu, bir düzeltme yaptığım için bir iPad web uygulaması.

Translate3d öğesini göreceli olarak konumlandırılmış öğelere uygulamak, bu öğeler için sorunu çözdü, ancak diğer öğeler ekrandan çıktıktan sonra oluşturmayı durdurdu. Sayfayı yeniden yüklemediğim sürece etkileşimde bulunamayacağım öğeler (resim) bir daha asla görüntülenmeyecekti.

Komple çözüm:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Şimdi, bu en "verimli" çözüm olmasa da, işe yarayan tek çözümdü. Mobile Safari, kullanım sırasında ekran dışında kalan öğeleri oluşturmaz veya bazen düzensiz olarak oluşturur -webkit-overflow-scrolling: touch. Bir translate3d, bu kaydırma nedeniyle ekran dışına gidebilecek diğer tüm öğelere uygulanmadığı sürece, kaydırma sonrasında bu öğeler kesilir.

Yani, tekrar teşekkürler ve umarım bu başka bir kayıp ruha yardımcı olur. Bu kesinlikle bana büyük zaman kazandırdı!

Html hariç tüm öğeleri hedefleme: *:not(html) benim durumumda diğer öğeler üzerinde sorunlara neden oldu. İstifleme bağlamını değiştirdi ve bazı z-endekslerinin kırılmasına neden oldu.

Biz daha iyi çalışmalısınız doğru elemanı hedef ve uygulamak -webkit-transform: translate3d(0,0,0)kendisine sadece.

Düzenleme: bazen translate3D(0,0,0)işe yaramaz, doğru öğeyi hedefleyen aşağıdaki yöntemi kullanabiliriz:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Translate3d çalışmadığında, perspektif eklemeyi deneyin. O her zaman benim için çalışır

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

-webkit-transform: translate3d(0,0,0)Bir öğeye statik olarak eklemek benim için işe yaramıyor.

Bu özelliği dinamik olarak uyguluyorum. Örneğin, bir sayfa kaydırıldığında -webkit-transform: translate3d(0,0,0)bir öğeye ayarladım . Kısa bir gecikmeden sonra, bu özelliği sıfırladım, yani, -webkit-transform: none Bu yaklaşım işe yarıyor gibi görünüyor.

Teşekkürler @Colin Williams beni doğru yöne yönlendirdiğiniz için.

Aynı sorunu ios7'de iscroll 4.2.5 ile yaşadım. Kaydırma öğesinin tamamı kaybolur. translate3d(0,0,0)Burada önerildiği gibi eklemeye çalıştım , sorunu çözdüm, ancak iscroll "snap" efektini devre dışı bıraktı. Çözüm "position:relative; z-index:1000;display:block", kaydırma öğesini tutan tüm kaba css özellikleri vererek geldi ve alt öğelere translate3d verilmesine gerek yok.

Zaman zaman translate3dçalışmayabilir, bu durumlarda perspectivekullanılabilir

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Ben sadece bu ile çözüldü emin darn:

overflow-y: auto;

(Muhtemelen sadece overflow: auto;ihtiyaçlarınıza bağlı olarak çalışır.)

Bir rotasyonun uygulandığı ve / veya bir Z indeksinin kullanıldığı durumlar vardır.

Döndürme : Bir -webkit-transformöğeyi döndürmek için var olan bir bildirim , görünüm sorununu (örneğin -webkit-transform: rotate(-45deg)) ele almak için yeterli olmayabilir . Bu durumda -webkit-transform: translateZ(0px) rotateZ(-45deg)bir hile olarak kullanabilirsiniz ( Z döndürmesine dikkat edin ).

Z endeksi : Döndürmeyle birlikte z-index, gibi pozitif bir özellik tanımlayabilirsiniz z-index: 42. "Rotasyon" altında açıklanan yukarıdaki adımlar benim durumumda, boş olsa bile, sorunu çözmek için yeterliydi translateZ(0px). Bu durumda Z endeksinin kaybolmasına ve yeniden ortaya çıkmasına neden olabileceğinden şüpheleniyorum . Her durumda, z-index: 42mülkün korunması gerekir - -webkit-transform: translateZ(42px)sadece yeterli değildir.

Bu, geliştiricilerin karşılaştığı çok yaygın bir sorundur ve esas olarak Safari's, yeniden tanımlanmış öğelerin yeniden oluşturulmamasından kaynaklanmaktadır position : fixed.

Bu yüzden ya pozisyon özelliğini değiştirin ya da diğer cevaplarda belirtildiği gibi bazı hack'lerin uygulanması gerekir.

link1

link2

Benim durumumda (bir iOS Phonegap uygulaması), göreceli alt öğelere translate3d uygulamak sorunu çözmedi. Kaydırılabilir elemanım, kesinlikle konumlandırıldığı ve üst ve alt konumları tanımladığım için ayarlanmış bir yüksekliğe sahip değildi. Benim için onu düzelten bir minimum yükseklik (100 piksel) eklemekti.

Fancybox'ın eski bir sürümünü kullanırken de aynı sorunu yaşadım. Sürüm 3'e yükseltmek sorununuzu çözebilir VEYA şunları ekleyebilirsiniz:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Bu problemle bir Framework7 & Cordova projesinde karşılaştım. Yukarıdaki tüm çözümleri denedim. Sorunumu çözmediler.

Benim durumumda, aynı sayfada sonsuz rotasyon (dönüşüm) ile 10'dan fazla css animasyonu kullanıyordum. Animasyonları kaldırmak zorunda kaldım. Bazı görsel özelliklerin olmaması ile şimdi sorun yok.

Yukarıdaki çözümler size yardımcı olmazsa, bazı animasyonları kaldırmaya başlayabilirsiniz.

-webkit-transform: translate3d(0, 0, 0);hüner benim için çalışmadı. Benim durumumda bir ebeveyn ayarlamıştım:

// parent
height: 100vh;

Bunu şu şekilde değiştirmek:

height: auto;
min-height: 100vh;

Başka birinin aynı durumla karşı karşıya kalması durumunda sorunu çözdü.

Benim durumumda, CSS sorunu çözmedi. JQuery kullanırken bir düğmeye yeniden render sorunu fark ettim.

$("#myButton").html("text")

Bunu dene

$("#myButton").html("<span>text</span>")