2015-06-24 12 views
5

Tworzę złożony prototyp dla aplikacji Webapp (używam Cordova do wdrożenia jej na moim iPhonie) i mam następujący problem:Elementy DOM są tam, ale niewidoczne, dopóki pewna właściwość CSS nie zostanie zmieniona

Elementy DOM (które nie są tworzone przy użyciu JavaScript, ale są tam w statycznym pliku HTML) są tam (są wyświetlane w odpowiednim rozmiarze w inspektorze), ale nie są widoczne. Czasami po prostu nie są wyświetlane, czasem są wyświetlane częściowo, czasami ich części są wyświetlane w innym miejscu. Inspektor pokazuje swoje "ciała" zawsze na właściwej pozycji.

Istnieje dziwne rozwiązanie: jak tylko właściwość CSS zostanie zmieniona po załadowaniu strony (na przykład odznaczenie i sprawdzenie dowolnej właściwości dowolnego elementu w inspektorze - czasami zmiana właściwości programowo również działa) są one wyświetlane poprawnie. Problem występuje zarówno w Safari i Chrome, ale nie w Firefoksie (może problem z Webkitem?). Najgorsze w Safari Mobile (to jest to, czego najbardziej potrzebuję, żeby działał).

Hakowanie pomogło na początku, ale już nie - używam i animuję wiele elementów Flexbox. Po prostu pytam o wiele z przeglądarki?

Edytuj: Problem wydaje się występować dopiero po przewinięciu w jednym pojemniku. Po przewinięciu pewnych (zupełnie nie związanych) elementów znikają.

+0

Patrz: [Jak stworzyć Minimal, kompletne i weryfikowalne przykład] (http://stackoverflow.com/help/mcve) . – Oriol

+0

Próbowałem stworzyć przykład, ale naprawdę trudno go odtworzyć. Zwłaszcza, że ​​dzieje się to tylko po osiągnięciu pewnego stopnia złożoności. Nie jestem pewien, która część mojego kodu jest odpowiedzialna za problem i nie sądzę, aby opublikowanie go tutaj w całości pomogło cokolwiek. Spróbuję ponownie stworzyć przykład, ale nie jestem pewien, czy będę w stanie to zrobić. – chl

+0

Po prostu nie mogę powiedzieć, dlaczego tak się dzieje. Usunąłem cały kod Flexbox, nie działa. Zastąpiłem '-webkit-overflow-scrolling: touch; 'z biblioteką iScroll, ponieważ kiedy ją przewinąłem, działało przez jakiś czas, ale teraz dzieje się to ponownie. Myślę, że dzieje się tak dlatego, że jest zbyt wiele elementów (nie ma ich zbyt wielu ...), ale nawet jeśli używam jQuery, aby załadować je tylko wtedy, gdy są widoczne i puste divy, gdy nie są, to jeszcze się dzieje. – chl

Odpowiedz

0

Spróbuj użyć jednego z następujących elementów animacji.

transform: translatez(0) 

lub

backface-visibility: hidden; 

lub

will-change: transform; 
Powiązane problemy