font-size animuje się przy ładowaniu strony

pytanie zadane 3 kwietnia 2019 w HTML i CSS przez Maciek123233 Gaduła (3,400 p.)

Witam, mam bardzo dziwny problem. Robię prostą stronę www, w której znajduje się pasek menu, zrobiony z listy. Chciałem, żeby po najechaniu myszką elementy listy ( #nav_lista>li ) się animowały, więc wpisałem w css (plik: nav.css) "transition: 1s;", jednak gdy odświeżam stronę elementy te niepotrzebnie się animują, to znaczy po przeładowaniu strony elementy animują się dosłownie tak jakby miały ustawione "margin:0; padding: 0; font-size: 0" i dopiero po 1 sekundzie wchodzi margin, padding, font-size jaki mają wpisany w pliki nav2.css (i jaki powinny mieć od samego początku).

Najdziwniejsze jest to, że ta strona jest w 2 plikach - index.html i nav2.css, i gdy skopiujemy całą zawartość z nav2.css i wkleimy wszystko do index.html (w sekcji <head> ... </head>, pomiędzy tagami <style> ... </style>) to problem się rozwiązuje. W czy jest problem i czym różni się kod css bezpośrednio w pliku .html, a w zewnętrznym akruszu stylów?

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="Stylesheet" href="nav2.css">
    <title>strona</title>
</head>
<body>
        <div id="nav">
                <div class="nav_wlasciciel">
                    XXX
                </div>
                <img id="nav_logo" src="logo.png">
                <div class="nav_wlasciciel">
                    XXX
                </div>
                <div style="clear: both;"></div>
                <div id="menu">
                    <ul id="nav_lista">
                        <li>menu</li>
                        <li>lokalizacja</li>
                        <li>godziny otwarcia</li>
                        <li>o nas</li>
                    </ul>
                    <div style="clear: both;"></div>
                </div>
            </div>
</body>
</html>

body
{
    margin: 0;
}
#nav
{
    width: 100%;
    text-align: center;
}
.nav_wlasciciel
{
    box-sizing: border-box;
    margin: 10px;
    width: calc(40% - 20px);
    font-size: 70px;
    font-family: 'Caveat Brush', cursive;
    letter-spacing: 2px;
    border-top: 2px double blue;
    border-bottom: 2px double blue;
    float: left;
}
.nav_wlasciciel::first-letter
{
    font-size: 75px;
}
.nav_wlasciciel::first-letter:hover
{
    font-size: 100px;
}
#nav_logo
{
    margin-top: 10px;
    width: 20%;
    float: left;
}
#menu
{
    background-image: linear-gradient(#fff, #e0ecfa, #fff);
    font-size: 30px;
}
#nav_lista
{
            
    display: inline-block;
    list-style-type: none;   
    padding: 20px;
}
#nav_lista>li
{
    float: left;
    padding: 20px;
    transition: 1s;
}
#nav_lista>li:hover
{
    padding: 20px 70px;
}

1 odpowiedź

odpowiedź 3 kwietnia 2019 przez Comandeer Guru (601,110 p.)
wybrane 3 kwietnia 2019 przez Maciek123233

Najlepsza

To bug chrome'a → https://bugs.chromium.org/p/chromium/issues/detail?id=332189

Dziwne o tyle, że dotąd wszystkie reprodukcje używały input, a okazuje się, że starczy:

span
{
	float: left;
	padding: 20px;
	transition: 1s;
}

Jest proste obejście: dodać skrypt zawierający co najmniej spację tuż po arkuszu:

<script> </script>

Zgodnie z tym, jak działa parser HTML, to musi blokować rendering – i wychodzi na to, że rozwiązuje też problem.

komentarz 3 kwietnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Kocham takie haki... a potem przyjdzie ktoś inny, stwierdzi że to zbędne, nie zauważysz w CR, wleci do mastera, na proda... i bach, przylatuje UX na sygnale :D

oczywiście nie neguję Twojej odpowiedzi, jest zapewne jak najbardziej ok, niestety czasami trzeba się posuwać do takich haków, tylko warto wg mnie dać chociaż jakiś mały komentarz po co to, aby ktoś faktycznie kiedyś nie wywalił... a znaleźć potem błąd to nie takie proste :) (już przerabiałem takie sytuacje na prodzie...). To jest jedno z nielicznych miejsc, gdzie moim zdaniem komentarz ma prawo, a nawet powinien pojawić się w kodzie.

komentarz 3 kwietnia 2019 przez Comandeer Guru (601,110 p.)

Oczywiście, gdyby to było produkcyjne, to bym wstawił komentarz. Każdy hack warto oznaczać – bo nie sądzę, żebym ja sam za tydzień pamiętał, po co wstawiłem tam skrypt ze spacją ;)

komentarz 3 kwietnia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Każdy hack warto oznaczać

niedawno przy okazji pewnej zmiany zrobiłem w jednym projekcie mały refaktor... teoretycznie wsio było oki, w CR nawet mi potwierdzili, że można to wywalić... i na drugi dzień alarm z produkcji, że mamy "wyjebkę" na IE 11... no przyznaję, na tym już nie chciało mi się klikać, ile można siedzieć na browserstacku... :) Dopiero po dłuższej chwili doszedłem co jest powodem i dopiero wtedy autorzy tego projektu przypomnieli sobie o problemie... trochę w wolnej chwili poszperałem... minęło niecałe 7 miesięcy od wprowadzenia zmiany do czasu mojego refaktoru :) a wystarczył jeden, malutki komentarz... :)