• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[html, css] Problem z transition, padding/margin/font-size animuje się przy ładowaniu strony

0 głosów
223 wizyt
pytanie zadane 3 kwietnia w HTML i CSS przez Maciek123233 Gaduła (3,210 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ź

+1 głos
odpowiedź 3 kwietnia przez Comandeer Mentor (458,640 p.)
wybrane 3 kwietnia 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 przez Tomek Sochacki Mędrzec (186,730 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 przez Comandeer Mentor (458,640 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 przez Tomek Sochacki Mędrzec (186,730 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... :)

komentarz 3 kwietnia przez Maciek123233 Gaduła (3,210 p.)
Pierwszy raz dowiaduję się, że to nie ja coś zkopałem :) Dzięki za pomoc.

Podobne pytania

0 głosów
1 odpowiedź 63 wizyt
0 głosów
1 odpowiedź 61 wizyt
0 głosów
1 odpowiedź 78 wizyt
pytanie zadane 4 marca 2017 w HTML i CSS przez bat_kuba Użytkownik (610 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

65,662 zapytań

112,292 odpowiedzi

236,952 komentarzy

46,650 pasjonatów

Przeglądających: 255
Pasjonatów: 10 Gości: 245

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...