Sayfanın ilk "focus" olayında Safari jittering/jumping (hata?) Olayı

Question

Şu anda Safari'de çok sinir bozucu bir hatayla mücadele ediyorum ve başka nerede döneceğimi bilmiyorum.

O en elemanları görünüyor (ama hepsi değil, ben farklılaştırarak faktörü ayırt edemez) üstüne ~ 2px atlamak için geçiş ya da animasyonlu sayfadaki tüm unsurları neden olacaktır focus olayı tetikler ve sol. Ve bu yalnızca sayfa yüklendikten sonra ilk odaklama olayında gerçekleşir.

droplr.com'un oturum açmış kısmında olduğu gibi, hatayı görmek biraz can sıkıcı bir durum ve JSFiddle üzerinde daha basit bir durumu tamamen ayırt edemedim. Eğer varsa

/Bir hesap oluşturmak ve log-in, bir damla için bu düzenleme simgesine tıklayın: Sayfanın işler seğirme ilk odakta olduğunu göreceksiniz

. Aynı sadece daha fazla, daha fazla damla ile

, ancak maksimum yaklaşık 40 boyalar dışarı görünüyor: İşte orada sayfadaki tek bir damla ve ben bir kusurlu öğe odağı tetiklemek zaman çizelgesi var. Ve profiler nefretsiz bir şey önermiyor. Sadece jQuery internals ile bir yolculuk.

translate3d veya matix3d aracılığıyla öğeleri yerleştirmek yerine, top ve left kullanın, bu hata gider. Bunu saatlerce ve saatlerce hata ayıkladıktan sonra, tamamen kaybettim.

Birisi benzer bir şey gördü, bir göz atabilir veya bir sonraki adımda hata ayıklama konusunda bana tavsiyede bulunabilir.

Çok teşekkürler!

Güncelleme: Dave Desandro suggested içeri tekme 3d hızlandırma, o yüzden titremeleri neden olmadığı malum olduğu üzere yerine translate ile denediler, vb. Donanım hızlandırmasının neden bir focus olayıyla ateş açacağını ve sadece bir kez neden olduğunu bilmiyorum.

Yüklemeye devam etmek ve donanımı artırmak için sayfa yükünün 0 bir dönüşümünü ayarlamayı denedim, ancak burada da şans yok. Daha fazla fikir karşılandı.

Answer 1

Özel font kitlerini kullanırken bunu gerçekleştirdim. Sorun bu olabilir mi? Bazı olaylar özel yazı tiplerinin yeniden çizilmesine neden olur, bu da sayfa görüntüsünde çok az "titremeye" neden olabilir.

Bazen, tüm üst HTML öğelerinin yüksekliklerini ve genişliklerini el ile ayarlama, titremeyi azaltabilir.

Answer 2

Ben bu soruyu bir süre önce gönderilmiş biliyorum ve bu uzun bir çekimin biraz ama buraya:

Belki bir başlangıç ​​noktası olarak krom geri dönmek ve kompozit katmanlama bakmak:

Adres çubuğuna şu adrese girin:

Kompozit kenarlıkları buradan etkinleştirebilirsiniz.

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Ne Zaman zaman bulduk görüntü oluşturma sorunları Chrome'da olmasına rağmen tarayıcısı onları benden gizleme ile oldukça iyi baş edebiliyor olmasıdır: kırmızı sınırlar genellikle oluşturma sorunuyla göstermektedir. Diğer web tabanlı tarayıcılarda ise sonuç daha belirgin olabilir (yani android).

Ayrıca, dönüştürülmekte olan içerikle bağlantılı olarak z-indeksleri kullanıldığında titreme meydana geldiğini gördüm.

Her iki durumda da, bu sorunu nasıl çözdüğünüzü bilmek harika olurdu. Belki kendi sorunuza bir cevap gönderin?

Answer 3

Bir süre önce bu sorunu yaşadım ve dürüst ben tam nedeni neydi hatırlamıyorum ama burada ben takip adımlardan bazıları:

Denetimi) (gizlemek yok ve Bir sonraki satırda aynı öğe için() göster (veya tersi). Örnek: el.show() el.hide()

Değişim Özel yazı tipleri için odak etkinlikler komut altındaki bu kodu eklemek istemiyorum öğeleri için "Arial"

: noFocusElem.off('focus'); Bu Nihayet herhangi komut önce css yerleştirmek yanlışlıkla

tarafından eklemiş olabileceğiniz herhangi odak işleyicileri kaldırmak için emin yapacaktır. Bir satır içi stil sonra css kuralları ekleyerek bu yardımcı olur :)

Answer 4

bir yolu yüklenme süresini sabitleme vakit önlemek amacıyla satır-, boyu mülkiyet

Umut kullanıyorsanız, özellikle titremeleri neden olabilir uygulandığını bir bilgi gerçektir seyirmesi; Sayfayı gizli olarak ayarlayabilir ve ardından öğeler yük ile görünür hale getirebilirsiniz. Sayfanızın yüklenmesi yavaşsa, görünen bir dönüşer varsayılanına sahip olmak isteyebilir, ardından yükünüzü gizleyebilirsiniz. Daha sonra yapacak daha iyi bir şeyin olmadığı zaman konuya geri dönebilirsiniz.

Answer 5

Sadece 2c değerinde. Ben denemek istiyorum

ilk şey: krom Birincisi, 'about: flags' in vurmak (evet ben Chrome kullanmıyorsanız biliyorum). 'Composited render layer borders' öğesini bulun ve açın. Bu özellik açıldığında, neyin işlendiğine/donanım hızlandırıldığına dair kaba bir fikir edineceksiniz.

Bkz: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

ve herhangi bir işleme sorunları arayın. Bunlar normalde z-endekslerinden kaynaklanır. Herhangi bir z-endeksiyle oynayın ve oluşturma sorunları çözülene kadar belirli öğeleri gizleyin/gösterin. Oradan oradan çalış. translate-z korsanları ve opaklık da sorunlara neden olabilir.

Diğer web tarayıcılarında oluşturma sorunları bulduktan sonra tarayıcılar krom kullanılarak teşhis edilebilir. Titreşen stok android tarayıcıda yaygın bir durumdur.

İkincisi: Odak olayının kendisine bir göz atın ve varsayılan davranışı önlemek gibi şeyleri deneyin. Bana uzun bir atış gibi gözüküyor ama bir adım attı.

Answer 6

Bunu test etmedim o yüzden burada çalışır ... ama eğer çok şaşıracak bir fikir:

$(document).ready(function() { 
    $(document).focus(function(e) { 
    e.preventDefault(); 
    }); 
    $(document).click(function() { 
     $(document).unbind(); 
    }); 
}); 

Answer 7

Geçenlerde aynı sorunla çalışan oldum ve sabit bir şey buldum Benim durumumda. gibi ekran dışında gizli bir şey için

Kontrol:

text-indent: -9999px; 
left: -9999px; 

3d üzerinden bunların herhangi örneğini Çıkarma (çocuklar dahil) elementleri hızlandırılmış benim için odak içerik atlama durdu.