antoinelin / react-locomotive-scroll

A locomotive-scroll React wrapper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Height of the container doesn't seem to work well with Next/image.

HyBDev opened this issue · comments

Hey and thanks for this wrapper! It helps a lot!

I've some issues when I use Next-image with the height of the container. Each time the page is loaded, the container has a different height.
It seems to be related to the fact of not indicating a size to the image component (I use the layout=fill option) and
not using the priority tag.

What can I do to fix that? Thanks!

Hello @HyBDev I did not use Next Images with Locomotive Scroll yet, could you provide a codepen or a repository on which I can reproduce the bug so I can dig and push a fix ?

Thank you 🙏

EDIT : in case it can helps, as I use a ref to store the scroll object and prevent too much unwanted re-renders, you should try to add a useEffect watching your component to be rendered and trigger a scroll.update() inside

Okay, that was on my to-do list to add a link to reproduce it so I will try to do it today or tomorrow.
I suspect it's coming from Next/image and because the ScrollProvider checks the height before the image size was provided. :)