We are experiencing an issue with anchor links (e.g., /#avantage) when navigating from a different page. The scroll offset breaks, causing the browser to land somewhere in the middle of the section instead of at the top.
The issue occurs on all pages except the homepage, where it works perfectly.
Disabling “Lazy-loading” in Bricks settings resolves the issue on all pages.
The bug is present in Chrome and Safari, but works fine in Firefox.
It seems like the lazy-loading prevents the browser from calculating the correct scroll position upon page load.
I have also tested this without the image in the section, with the same results.
Any solutions on how to solve this and keep the lazy-loading?
the settings you see there is not for anchor links, but for for images. It will tell Bricks when it should start loading the image. For example, if you set it to 500, then it will start loading the images 500px before the image element enters the viewport.
Because of this, I’m marking the topic as no-bug.
I had a similar issue in the past, when I was linking from a different page to an accordion item.
Setting scroll-margin-top on the item I linked to, solved the issue for me.
I mean something like this:
I already had set scroll-margin-top, and it was working correctly only for the first few sections. I discovered that I needed to explicitly set a height for my lazy-loaded images, as they were affecting section dimensions. It seems that Chrome and Safari require defined heights for lazy-loaded images to calculate scroll positions accurately.
Thanks for the help!