• 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

VPS Starter Arubacloud
0 głosów
462 wizyt
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ź

+1 głos
odpowiedź 3 kwietnia 2019 przez Comandeer Guru (599,730 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 (599,730 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... :)

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

Podobne pytania

0 głosów
1 odpowiedź 241 wizyt
0 głosów
1 odpowiedź 171 wizyt
0 głosów
1 odpowiedź 134 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...