Salut, am o problema careia nu ii dau de cap si este timpul sa apelez la ajutor (@isti37 te invoc).
Problema apare atunci cand faci scroll pe pagina, contentul nu este afisat cum trebuie, apare taiat.
Salut Claudiu,
in cardDetailsWrapper am observat ca ai setat minHeight: 0 - oare de ce ai ales sa aplici minHeight 0, care ar fi rostul?
in cardsContainer am observat ca ai setat height: “100%” - by default este 100% si e de preferat sa nu setat height ci sa il omitem, diferentele de inaltime se pot ajusta cu padding de preferat.
Probabil daca le scoti pe acestea nu va mai aparea behaviour-ul din video.
Mie unul nu mi apare .
Nu pot sa reproduc problema pe care o ai in video pe Edge, ce browser utilizezi ? Eu observ ca renderul se face mult prea incet sau e ceva virtual scroll, poate ai prea putine resurse pe calculator ?
@Paul am aplicat din cauza asta html - Why does setting min-width or min-height to 0 prevent CSS flex and grid overflow? - Stack Overflow
poate fii scos, este acelasi comportament.
@isti37 folosesc firefox si gen nu apare tot timpul, asta este weird
am incercat pe doua laptopuri cu macOS M1 si Intel si am acelasi comportament
.AppWrapper_withNavigation__1fs2m61 {
height: calc(var(--vh, 1vh) * 100 - 8.5rem);
}
.AppWrapper_fullHeight__1fs2m62 {
height: calc(var(--vh, 1vh) * 100);
}
Cred ca de aici e problema. Calc o sa fie rulat inainte ca react sa se poata reranda, trebuie sa folosesti useLayoutEffect ca sa iei valoarea la height, nu useEffect.
useEffect(() => {
if (typeof window !== "undefined") {
count += 1;
updateVh();
window.addEventListener("resize", updateVh);
}
return () => {
window.removeEventListener("resize", updateVh);
count -= 1;
if (count === 0) {
document.documentElement.style.removeProperty(VARIABLE_NAME);
}
};
}, [updateVh]);
return vh;
};
Foloseste useRef, nu e ok implementarea la hook cu variabila pe style.
Faza e ca m-am gandit la cel hook dar l-am dezactivat si am observat acelasi behaviour.
Cred ca acel hook l-am luat de pe stackoverflow sau github. Dar am sa ma uit si la alta implementare
Problema e ca useEffect n-are de unde sa vada height-ul real dupa calc si vh fiindca ruleaza doar cand deja se randeaza componenta, iti trebuie useLayoutEffect care ia valoarea din DOM-ul real inainte ca react sa se apuce de randat.
Cred ca am sa fac replace la acel hook cu asta GitHub - mvasin/react-div-100vh: A workaround for the '100vh' issue in mobile browsers
Eu nu lucrez cu mobile deci nu te pot ajuta cu problema asta
Am sa revin cu un update dupa ce am sa modific
@claudiucjc din punctul meu de vedere nu hook-ul este de vina de ce iti face chestia asta.
Practic sunt imaginile ce le iei de pe unsplash. Pana isi fac loading-ul iti face chestia asta.
Trebuie sa implementezi un fallback sau sa le iei intr-un alt mod.
Din ce am testat eu cred ca asta e problema la componenta Item : Aspect.Ratio si img-urile
Si eu am crezut asta, dar faza e ca atunci cand faci scroll imaginile sunt deja incarcate dar browser-ul cred ca nu vede bine acel container cu overflow, pentru ca atunci cand
overflowX: "auto"
(.cardsContainer) este scos totul se randeaza ok atunci cand faci scroll
In acest caz imaginile n-ar avea width-height si s-ar vedea altfel.
Ok. deci e mult mai simplu
Ai facut in AppWrapper.css.ts ca appWrapper sau aiba overflowY: “hidden”
Trebuie sa il stergi
Ai o oarecum dreptate… dar vezi page container
const pageContainer = style({
display: “flex”,
alignItems: “center”,
flexDirection: “column”,
width: “100%”,
minHeight: 0,
height: “100%”,
padding: “4rem”,
scrollbarWidth: “thin”,
background: “rgba(242, 242, 242, 1)”,
overflowY: “auto”,
});
si de acolo sterge overflow auto.
sunt mai multe lucruri de modificat din css ex: la imagini neaparat sa pui width si heigh, imaginile trebuie sa aiba si un fallback avand in vedere ca le iei din surse externe etc
le-am cam incercat. container-ul cu acele iteme trebuie sa fie pana in navigation, altfel scroll-ul se duce pana jos (alta image, same behavior)
inteleg asta, dar am testat si cu withsi height pe container-ul de imagini
Revin cu un update, same behaviour fara imagini.
Video o sa fie disponibil aici CSS Overflow Problem with no Images - YouTube
M-am confruntat cu o problemă foarte asemănătoare la un slider care avea un clipit ciudat (fără un gram de logică) în momentul în care se naviga de la un slide la altul (de fapt, imediat după ce se termina efectul/animația de slide). Am încercat atunci să trec de la translateX
la translate3d
înțelegând că translate3d
are o performanță mai bună. N-a mers (nici nu cred că avea legătură cu problema).
În schimb, dacă modificam din overflow:hidden
în overflow:auto
sau overflow:scroll
pentru wrapper-ul care ascundea slide-urile care nu erau în view, dispărea problema.
Clipitul apărea în mai multe browsere, dar doar pe macOS Ventura (16, parcă). Iar după câteva căutări pe google și încercări sugerate de alții, am ajuns la concluzia că vorbim mai degrabă despre un bug decât de o greșeală în cod.
Mai departe, cum nu aveam mac, am folosit un emulator online și am realizat că problema apărea și în alte slider-uri de pe diferite site-uri. Super. După ce am văzut asta, mi-am dat seama instant ce trebuie să fac. Am rezolvat problema în felul următor: