Po usunięciu i ponownym zastosowaniu właściwości CSS, aby działała. Możliwy błąd w CSS?

Question

UPDATE: Przed przeczytaniem do tego postu, a mówiąc trzeba więcej kodu replikować problemu, proste pytanie Pytam się:

„Czy kiedykolwiek musiał usunąć i ponownie zastosować własności CSS na element, aby styl ten miał zastosowanie, gdy właściwość była już na tym elemencie i powinna działać domyślnie, a jeśli tak, jakie było Twoje rozwiązanie lub czy wiesz, co ostatecznie spowodowało problem? "

UPDATE 2: Nie jestem w 100% pewien, ale to może być tylko problem z właściwością font-size i zmieniane dynamicznie przy użyciu JavaScript. CSS dla zewnętrznych i/lub wewnętrznych elementów, które są ponownie zmieniane w JavaScript działa tak, jak powinien, problem ten zdaje się występować tylko w przypadku rozmiaru czcionki. Być może otaczający HTML CSS nie przechwytuje font-size na zmiany stylów intensywnych pamięci (np. Nasza funkcja zmiany rozmiaru). Tylko zgadnij.

---

Reszta tego postu jest środkiem do wyjaśnienia, o czym mówię.

Ten problem może dotyczyć wyłącznie Chrome. Aby wyjaśnić, nasza aplikacja jest wykorzystywana wewnętrznie przez nasz zespół sprzedaży, a projekt został wytypowany do skupienia się wyłącznie na Chrome, zarówno w zakresie programowania, jak i użytkowania w terenie. Już teraz stylizacja jest całkowicie wyłączona po otwarciu tego w innych przeglądarkach, ponieważ musieliśmy tylko stworzyć nasz CSS, aby był zgodny z Chrome (w jaki sposób miałem tyle szczęścia, że ​​zdobyłem taką pozycję, nie wiem, haha).

Kilka razy spotkałem się z tym problemem w mojej karierze kodowania, co uważam za błąd w CSS, ale może to być rzadki błąd między zmianami stylu JavaScript w DOM i nadrzędnym CSS kontenera, który nie dostosowuje się do zmiana ze względu na możliwe ograniczenia pamięci lub niewielkie opóźnienie w przetwarzaniu między JavaScriptem stosującym styl do HTML i CSS, który nie jest aktualizowany w celu dostosowania. Myślę, że jest to ważne pytanie, ponieważ myślę, że każdy twórca stron WWW z przodu lub w przyszłości będzie miał do czynienia z tym w pewnym momencie swojej kariery.

Sytuacja

Ujmując to jak najkrótszy, mamy pojemnik wewnątrz naszego ciała, które używamy Javascript do wielkości w formacie 16: 9 proporcji w stosunku do wielkości okna. Zrobił zrzut ekranu całego okna. Jak widzicie, mamy wewnętrzną wielkość kontenera proporcjonalnie w naszym oknie przeglądarki (czarny obszar, który jest ciałem). Wewnętrzny pojemnik jest, gdy cała zawartość na naszych ekranach aplikacji:

Nasz CSS jest zbudowana w oparciu o procenty, o ile to możliwe. Zbudowaliśmy funkcję "resizeUI", która służy głównie do zmiany rozmiarów czcionek w oparciu o bieżący stosunek szerokości do wysokości ekranu wewnętrznego, chociaż istnieją inne elementy w tej funkcji, które również zmieniają rozmiar, w przypadku ponownego rozmiaru okna. Okno zawsze zmienia się perfekcyjnie, a wszystko, co wymaga określonego rozmiaru, w oparciu o współczynnik szerokości/wysokości okna wewnętrznego, działa zgodnie z oczekiwaniami, z odpowiednim współczynnikiem CSS elementów podrzędnych. Ale ....

Problem

Gdy okno przeglądarki jest re-sized klikając i przeciągając (przyrostowe ponownego zaklejania) wszystko na stronie ponownych rozmiarach doskonale.Jednak gdy rozmiar okna zmieni się drastycznie i natychmiast, pełny ekran (Maksymalizuj) na mały (Przywróć w dół) lub na odwrót, rozmiary czcionek w górnym menu zmienią się, ALE CSS jednostki macierzystej li nie dostosuje się do nowy rozmiar czcionki, chyba że anuluję zaznaczenie (usunięto) atrybutu padding i ponownie go sprawdzam (dodawaj ponownie). Kiedy to robię, działa dobrze. Kontener li ma po prostu padding:1%, a więc normalnie dostosowuje jego rozmiar poprawnie w oparciu o rozmiar wewnętrznej przęsła, który zmienia się wraz z wielkościami czcionki.

Jednostka nadrzędna li powinna automatycznie dostosowywać się do zmiany rozmiaru czcionki wewnętrznej. Jestem tego pewien, ponieważ kontener rodzica li automatycznie zmieni rozmiar samego siebie, gdy zmienię rozmiar lub długość tekstu menu, w locie, w inspektorze.

Oto co zwykle wygląda albo na obciążenia lub przyrostowych zmian rozmiaru okna:

A oto jak to wygląda, kiedy idę z małego rozmiaru okna na pełnym ekranie przy użyciu Maksymalizuj :

My (hacky) Fix

Jedynym sposobem, w jaki to zrobiłem, jest usunięcie wyściółki dla elementów <li> na górze funkcji zmiany rozmiaru, a następnie ponowne zastosowanie jej na dole funkcji ponownego rozmiaru PO linii, która rozmiary czcionki. Jednak działa to 50% czasu. Tylko przy ustawieniu limitu czasu 100ms na dole funkcji zmiany rozmiaru, aby ponownie zastosować dopełnienie, otrzymałem go do pracy w 100% przypadków.

Aby pomóc, oto bardzo prosty przykład kodu, nad którym pracuję. W ul rozmiary automatycznie na jego wewnętrzne elementy:

Stosowna HTML

<ul> 
    <li class="menu-items><span>Item 1</span></li> 
    <li class="menu-items><span>Item 2</span></li> 
    <li class="menu-items><span>Item 3</span></li> 
    <li class="menu-items><span>Item 4</span></li> 
    <li class="menu-items><span>Item 5</span></li> 
</ul> 

Stosowna CSS

ul { 
    position:absolute; 
    top:0; 
    right:2%; 
    text-align:center; 
} 
.menu-items { 
    padding: 1%; 
} 

Stosowna JavaScript

Co działa około pół godziny

function resizeUI(){ 
    $('.menu-items').css('padding','0'); 
    //Random other elements being re-sized 
    $('.menu-items span').css('font-size', properRatio + "px"); 
    //More elements being resized 
    $('.menu-items').css('padding','1%'); 
} 

Działa za każdym razem

function resizeUI(){ 
    $('.menu-items').css('padding','0'); 
    //Random other elements being re-sized 
    $('.menu-items span').css('font-size', properRatio + "px"); 
    //More elements being re-sized 
    setTimeout(function(){ 
    $('.menu-items').css('padding','1%'); 
    }, 100); 
} 

Ostateczny Pytanie

Czy ktoś napotkał podobne problemy podczas pracy z CSS, które należy dostosować do zmiany rozmiaru elementu? Wyczuwam, że jest to problem z pamięcią lub błędem między JavaScriptem a CSS, ponieważ ustalenie limitu czasu jest jedynym niezawodnym sposobem, w jaki udało mi się go wykonać w 100% przypadków, i to znowu występuje TYLKO w ogromnej, natychmiastowej zmianie w oknie rozmiar (Maksymalizuj, aby przywrócić w dół lub odwrotnie), ale nie na ręczne, mniejsze, przyrostowe zmiany rozmiaru.Przepraszam za taki gadatliwy post/pytanie, ale kilkakrotnie spotkałem się z tym dziwnym błędem z koniecznością usunięcia i ponownego zastosowania atrybutu CSS, aby działał poprawnie i nie mam wątpliwości, że inni deweloperzy też.

Answer 1

Czy kiedykolwiek miał problem konieczności zdejmowania i ponownego zastosowania właściwość CSS na element, aby w tym stylu do zastosowania, gdy było już tam i powinien być domyślnie działa?

Tak: https://stackoverflow.com/a/34245989/1529630

Jakie było rozwiązanie?

wyłączające style i resetowanie je natychmiast po nie działa, prawdopodobnie dlatego, że przeglądarka nie zaktualizowane jeszcze stronę, a następnie wykryć to, że resetują więc w końcu to nic nie zrobił.

Rozbrojenie i resetowanie w czasie oczekiwania zadziałało, ale spowodowało denerwujące mrugnięcia.

W moim przypadku rozwiązaniem było usunięcie elementu i natychmiastowe wstawienie go.

window.addEventListener('resize', function() { 
    // Force a rerender 
    var parent = element.parentNode, 
     next = element.nextSibling; 
    parent.removeChild(element); 
    parent.insertBefore(element, next); 
}); 

Ostrzeżenie: spowoduje to, że przeglądarka wykona operacje związane z układem, farbą i kompozytem, ​​co jest kosztowne.

Answer 2

Podszewka działa. Każda jednostka (div lub cokolwiek, co używasz) nakłada się na poprzednią równomiernie, ponieważ masz ponad 100% całkowitej szerokości widoku. Buduje się je od lewej do prawej, a gdy osiągnie maksymalny dopuszczalny rozmiar, wszystkie będą równie popychać poprzednie. Również dopełnienie wpływa na elementy wewnątrz elementu div i nie wpływa na elementy div poza samym sobą. Więc wszystkie mają poprawny rozmiar, ale nie ustanowiłeś reguły, która zatrzymywałaby nakładki div. Margines może to zrobić, ale jeśli mają one więcej niż 100% pożądanej wielkości, będziesz musiał w jakiś sposób poradzić sobie z nadmiernym przepływem. Możesz spróbować użyć auto do wypełniania, ale margines może być lepszy. W przeciwnym razie musisz grać z rozmiarami i wartościami procentowymi, aby dopasować je do maksymalnej dopuszczalnej szerokości. Sprawdź kod w pudełku CSS Model here.