CSS Overflow problem while scrolling

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 .

1 Like

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 ?

1 Like

@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.

2 Likes

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 :smiley:

Am sa revin cu un update dupa ce am sa modific :crossed_fingers:

@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 :slightly_smiling_face:
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)

Screenshot 2023-02-04 at 10.30.59
Screenshot 2023-02-04 at 10.30.45

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: