/* ALLMEBLO 2026-08-06: rezerwacja miejsca pod tresc, ktora dorysowuje obcy skrypt. Plik nalezy do zadania "cls" (przeskok ukladu, CLS). PROBLEM Karuzela opinii Trusted Shops () jest wlasnym elementem HTML, ktory rejestruje dopiero skrypt integrations.etrusted.com/applications/widget.js/v2. Do tego momentu element ma display:inline i zerowa wysokosc, wiec zajmuje 0 pikseli. Tresc ladnie sie pojawia, ale caly uklad ponizej przeskakuje w dol. Na allmeblo.pl sa dwa takie widgety na stronie glownej: jeden na gorze tresci (ts-wdg-loc-hp-wrapper) i jeden nad stopka (footer-reviews-outer). Ten nad stopka jest na kazdej stronie sklepu, dlatego plik jest wpiety globalnie, a nie tylko na stronie glownej. POMIAR (Chromium, allmeblo.pl, 2026-08-06) Element zdefiniowany po okolo 0,75 do 0,98 s, tresc dorysowana po okolo 1,25 do 1,50 s. Wysokosc pudla po dorysowaniu: 169,1875 px, DOKLADNIE TA SAMA przy szerokosci okna 320, 360, 375, 414, 480, 576, 600, 768, 992, 1024, 1200, 1366, 1440, 1600 i 1920 px, przy dpr 1 i 2. Widget nie ma wiec zadnego progu, na ktorym zmienia wysokosc, i jedna wartosc jest realna dla wszystkich szerokosci. Nie jest to srednia. DRUGIE 36 PIKSELI Sama wysokosc pudla to za malo. Tresc w shadow DOM ma wlasny odstep 18 px u gory i 18 px u dolu, a ze host nie mial ani obramowania, ani wypelnienia, te odstepy SCALALY SIE na zewnatrz (zwykle scalanie marginesow) i doliczaly sie do rodzica dopiero w chwili dorysowania tresci. Zmierzone: rodzic 205,1875 px, odstep 18 px u gory i 18 px u dolu, tak samo przy 320, 360, 390, 768, 1024, 1440 i 1920 px. Rezerwacja samych 169,1875 px zostawialaby wiec przeskok o 36 px. Dlatego host dostaje display:flow-root. Zaklada wlasny kontekst formatowania, wiec te 18 px zostaje w srodku pudla, a caly slad widgetu jest jedna liczba: 205,1875 px. Nic sie przez to nie przesuwa, bo suma jest taka sama jak dzis. Stara przegladarka bez flow-root zatrzyma sie na display:block z poprzedniej linii. DLACZEGO min-height, A NIE height Gdyby widget kiedys wyrenderowal sie nizszy, min-height dalej trzyma pudlo i przeskoku nie ma. Gdyby wyrenderowal sie wyzszy, przeskok bylby tylko o roznice. height by tego nie dal, bo przycialoby tresc. DLACZEGO display:block Element ma domyslnie display:inline. Na elemencie liniowym min-height nie dziala w ogole, wiec bez tej linii rezerwacja nie ma zadnego skutku. */ etrusted-widget.widget_review_carousel_service { display: block; display: flow-root; min-height: 205.1875px; } /* ---------- gdy widget sie NIE wczyta ---------- Zarezerwowane miejsce nie moze zostac pusta biala dziura na zawsze. :not(:defined) jest prawda dokladnie tak dlugo, jak dlugo skrypt Trusted Shops nie zarejestrowal wlasnego elementu. W praktyce to przypadek zablokowanego skryptu: blokada reklam, filtr DNS, awaria etrusted.com. Po 10 sekundach takiego stanu zwalniamy miejsce i uklad sie domyka. Progu 10 s nie da sie ustawic nizej bez ryzyka: na wolnym laczu skrypt potrafi dojechac po kilku sekundach, a zwolnienie miejsca tuz przed dorysowaniem tresci zrobiloby dokladnie ten przeskok, ktory zwalczamy. Gdy element zostanie zarejestrowany, ten selektor przestaje pasowac, animacja jest anulowana i rezerwacja obowiazuje dalej. Ma to znaczenie, bo miedzy rejestracja elementu a dorysowaniem tresci mija jeszcze okolo pol sekundy i wlasnie w tym oknie miejsce musi byc trzymane. To nie jest ruch w rozumieniu prefers-reduced-motion: nic sie nie przesuwa ani nie miga, animacja jest tu wylacznie licznikiem czasu. Dlatego celowo NIE wylaczamy jej przy ograniczonym ruchu, bo wylaczenie zostawiloby uzytkownikowi te sama biala dziure na zawsze. Straznik w fullslider.js robi to samo w JavaScripcie, na wypadek gdyby ktos kiedys wygasil animacje globalnie. */ @keyframes alm-ts-zwolnij-miejsce { from { min-height: 205.1875px; } to { min-height: 0; } } etrusted-widget.widget_review_carousel_service:not(:defined) { animation: alm-ts-zwolnij-miejsce 1ms linear 10s forwards; } /* Klase dokleja straznik w fullslider.js, gdy element jest juz zarejestrowany, ale mimo to nie ma zadnej tresci (np. padl kanal opinii). CSS sam takiego stanu nie rozpozna, bo tresc siedzi w zamknietym shadow DOM. */ etrusted-widget.alm-ts-pusty { min-height: 0 !important; animation: none !important; }