2015-06-24 21 views
5

Webapp için karmaşık bir prototip oluşturuyorum (iPhone'uma dağıtmak için Cordova kullanıyorum) ve şu soruna sahibim:DOM Öğeleri var ancak bazı CSS özelliği değiştirilinceye kadar görülemiyor

DOM Öğeleri (JavaScript kullanılarak oluşturulmamış, ancak statik HTML dosyasında bulunurlar) oradadır (denetçide doğru boyutta görünürler) ancak görünmezler. Bazen sadece gösterilmiyorlar, bazen kısmen görüntülenirler, bazen bunların parçaları farklı bir yerde gösterilir. Müfettiş, "bedenlerini" her zaman doğru pozisyonda gösterir.

Garip bir çözüm var: Bir CSS özelliği, yüklendikten sonra değiştirildikten sonra (örneğin, denetçideki herhangi bir öğenin herhangi bir özelliğinin işaretini kaldırmak ve kontrol etmek - bazen bir özelliği program aracılığıyla da değiştirmek de) doğru şekilde gösteriliyor. Sorun, hem Safari'de hem de Chrome'da gerçekleşiyor, ancak Firefox'ta değil (belki bir Webkit sorunu mu?). Safari Mobile'da en kötüsü (en çok çalışmak için ihtiyacım vardı).

İlk başta transform: translate3d(0); hack'in kullanılması yardımcı oldu, ancak artık değil - Birçok Flexbox elemanını kullanıyorum ve canlandırıyorum. Ben sadece tarayıcıdan çok şey soruyorum?

Düzenleme: Sorun, yalnızca bir kapsayıcıda kaydırdıktan sonra oluşuyor gibi görünüyor. Kaydırdıktan sonra belirli (tamamen ilgisiz) öğeler kaybolur.

+0

bakınız: [a, minimum tam ve doğrulanabilir örnek oluşturma] (http://stackoverflow.com/help/mcve) . – Oriol

+0

Bir örnek oluşturmaya çalıştım, ancak yeniden oluşturulması gerçekten zor. Özellikle de bir karmaşıklık derecesine ulaşıldığında gerçekleşiyor. Kodumun hangi kısmının sorundan sorumlu olduğuna emin değilim ve burada yayınlamanın tamamen bir işe yarayacağını düşünmüyorum. Daha sonra tekrar bir örnek oluşturmayı deneyeceğim, ancak bunu yapabileceğime emin değilim. – chl

+0

Bunun neden devam ettiğini anlayamıyorum. Tüm Flexbox Kodlarını kaldırdım, işe yaramadı. -webkit-overflow-scrolling değiştirdim: dokunma; iScroll-Library ile, çünkü ne zaman kaydırdığımda kırdı, bir süre çalıştı ama şimdi tekrar oluyor. Bence çok fazla eleman var (çok fazla değil…) ama jQuery'yi kullanırken, sadece görünür olduklarında ve hala olmadığı zaman divleri boşaltırken jQuery kullandığımda bile. – chl

cevap

0

Aşağıdakilerden birini animasyonlu öğenize deneyin.

transform: translatez(0) 

veya

backface-visibility: hidden; 

veya

will-change: transform; 
İlgili konular