scroll-smooth and lazy images

[carstenjaksch]

This is a common issue not only related to Peak, but I would like to discuss a solution that could be included with Peak.

By default, Peak sets scroll-smooth on the HTML element. But this does not work well with a lot of lazy-loaded images on the site. For example: I have a project with a long home page, a lot of lazy-loaded images (all using the picture partial of Peak) and links to an ID at the bottom of the page.

If the user visits the page for the first time and clicks such a link without scrolling, the browser smoothly scrolls to ... a random location. On desktop, it is not always a big issue – the target is just a bit offset. But on smaller screen sizes, the issue is getting worse: The user is stranded somewhere in the middle of the page and the target location is not in sight – very confusing.

This happens because during the scroll all of the images are loaded and the page jumps, so does the original link target.
But the images have width and height attributes set, you say. Yes, but these do not work with responsive images.

Here is an article about that kind of issue and probably a solution: https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576

[robdekort]

Can we see this behavior somewhere online? I've never noticed this.

But the images have width and height attributes set, you say. Yes, but these do not work with responsive images.

Afaik this should prevent a layout shift by calculating the aspect ratio, even when using responsive images. Where did you learn this?

[robdekort]

Hope so for you. Also, it doesn’t really seem related to Peak. You can always remove the smooth-scroll class I guess.

[carstenjaksch]

Yeah, but smooth scroll is quite important. But I found a solution: Place images in a grid container. This seems to preserve the space better than flex or something else.

[ELowry]

Not sure this helps; or even if it is directly related, but can you check if all your images (or other media elements, like <picture> tags) have a specifically defined height and width value in HTML (not just in CSS)?

The reason I ask this is that, as far as I understand, browsers use these values to calculate the "placeholder size" to use for the image before loading it. It doesn't need to be the actual final size after CSS affects it; but is still used to "make space" for the image when it's not there yet. (I think the aspect ratio and maximum placeholder sizes are what the browser actually uses these for)

If these HTML attributes are missing; it's possible that the browser fails to properly calculate where to scroll to because the page gets taller on the way there.

PS: you can see a reference to this at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

[carstenjaksch]

@ELowry Hey thank you for the answer and link. The img elements all have a width and height set in HTML, but not picture. Never saw that on any other website tbh and it is the default shipped with Peak.

I don't know why this won't work without a grid container and why so few other people see this behavior. Maybe because most other sites use JavaScript for lazy loading and/or smooth scrolling.

[ELowry]

@carstenjaksch yeah, my bad; I forgot that for picture tags it actually uses the internal img tag's values instead.

That's the only thing that came to mind though :/
Good luck figuring things out.