WIP: "scroll to" Action It has problems in different browsers

Browser: Chrome 132.0.6834.160
OS: Windows

Hi bricks team,

On one page, I used the “scroll to” action to pagination the product list so that after changing the page, the user is taken to the beginning of the product list. But “scroll to” seems to have problems in different browsers. For example…

  1. It doesn’t work at all in Firefox.
  2. In Chrome and Edge browsers, it doesn’t work the first time after loading the page. But it works the second or third time.
  3. I haven’t tried the Safari browser.

Thank you

hmmm

1 Like

Hi @sinanisler,

Thanks for the information. This is a limitation from the hosting company to prevent intrusion. If the user’s IP is outside the country, the Ajax filters of bricks will encounter problems. While there is no problem for the Ajax of the jet smart filters plugin.

I have now changed the link to playground. Thanks again.

Hey @HOSEIN,

can you record how it looks on your end in FF and Chrome, so that I see how it should look?

When I paginate, it will jump to the top of the page, and I’m not sure if this is what you mean or not.
Additionally, if you can screenshot the interaction settings?

Thank you.
Matej

1 Like

Hi,

Sorry, I thought it would be easy to reproduce, which is why I didn’t post a video.

Hi @HOSEIN,

I see. So, the page jumps to the top (which is correct), but in some cases, it’s a smooth scroll, and in some cases, it just jumps, right? - Just to make sure that’s correct.

I tested this locally, and it always just jumps. I believe it’s because we don’t assign a scroll behavior, and the browser automatically chooses one - that’s my guess.

I’ve created an improvement task for this, but please confirm if that was the issue, or is there something else, that I don’t see.

Thanks.
Matej

1 Like

Hi Matej,

Thank you for reviewing this report.

I see. So, the page jumps to the top (which is correct), but in some cases, it’s a smooth scroll, and in some cases, it just jumps, right?

But considering that Smooth scroll (CSS) is enabled in the bricks settings > General, it should always move up smoothly, right?

Hey,
not really. That smooth scroll is if you move to the anchor link, by changing the URL hash parameter.

But in this case, when using this scroll with interactions, we are scrolling with JavaScript, because we have to calculate where to scroll to.

I hope that explains it well.
Matej

Hi again Matej,

First of all, I apologize for not mentioning an important point at the beginning of this report. I mistakenly said that “scroll to” doesn’t work. “scroll to” works well in all browsers and jumps to the target anchor link.
In fact, the main point of this report was that in “scroll to” interactions, navigating to the anchor link does not happen smoothly across browsers.

not really. That smooth scroll is if you move to the anchor link, by changing the URL hash parameter.

Just to be sure, it seems that CSS smooth scroll has a direct impact on scroll to interactions. Please watch the video below.

As another example, the back to element also uses js. But if smooth scroll is disabled in the bricks settings, it will not work even if smooth scroll is enabled in the settings of this element.

Am I wrong?

Hey @HOSEIN,

Yep, it does have an effect on this, and I’m sorry, as I was probably not clear enough. It does have effect because, when we scroll to some position with JavaScript, we don’t define the behavior, so the default is auto, and I’ll quote MDN article:, what happens is the scroll behaviour is AUTO:

scroll behavior is determined by the computed value of scroll-behavior

So, the browser see, that we have “smooth scroll” enabled in CSS, and will try to use smooth scroll also with JS. But while it should work every time, it may not - like you figured out in your bug report :wink:

Hope it’s clear, and thank you a lot for this, interesting topic!
Matej

1 Like

Thank you very much for reviewing this report Matej❤️

1 Like

Hey @HOSEIN,

can you still reproduce this one? I tested, but I’m not able to do it anymore. This is my test element if you want to test it yourself.

{"content":[{"id":"ziokyl","name":"section","parent":0,"children":["usvvoz","vdffsy"],"settings":{"_cssGlobalClasses":["lrsofs"]}},{"id":"usvvoz","name":"container","parent":"ziokyl","children":["djhtlx","kjkdnj"],"settings":{}},{"id":"djhtlx","name":"button","parent":"usvvoz","children":[],"settings":{"text":"Scroll down with interaction","style":"primary","_interactions":[{"id":"uafwua","trigger":"click","action":"scrollTo","target":"custom","targetSelector":"#scroll-here","scrollToOffset":"50"}]}},{"id":"kjkdnj","name":"block","parent":"usvvoz","children":["ytboyu","driqix"],"settings":{"_display":"grid","_gridTemplateColumns":"repeat(4, 1fr)","_gridGap":"20"}},{"id":"ytboyu","name":"block","parent":"kjkdnj","children":["iqqtqw"],"settings":{"hasLoop":true,"query":{"posts_per_page":"4","ignore_sticky_posts":true}}},{"id":"iqqtqw","name":"text-basic","parent":"ytboyu","children":[],"settings":{"text":"{post_title}"}},{"id":"driqix","name":"pagination","parent":"kjkdnj","children":[],"settings":{"queryId":"ytboyu","_interactions":[{"id":"olitqw","trigger":"ajaxEnd","ajaxQueryId":"ytboyu","action":"scrollTo","target":"custom","targetSelector":"#scroll-here","scrollToOffset":"50","scrollToDelay":"1500"}],"ajax":true,"navigationBackgroundActive":{"raw":"var(--velora-secondary-500)","id":"icecpt","name":"Secondary 500"},"navigationWidth":"20","gap":"5"}},{"id":"vdffsy","name":"container","parent":"ziokyl","children":["oveedu"],"settings":{"_cssId":"scroll-here","_margin":{"top":"1000","bottom":"2000"}}},{"id":"oveedu","name":"text-basic","parent":"vdffsy","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar."}}],"source":"bricksCopiedElements","sourceUrl":"https://1bricks.local","version":"1.12.1","globalClasses":[{"id":"lrsofs","name":"top-section","settings":{"_margin":{"top":"100px"}},"category":"qqjeyx"}],"globalElements":[]}

Thank you.
Matej

1 Like

Hi Matej,

Strangely, it even works fine on my website now :thinking:

That’s interesting. Let’s see if it will be the issue again in the future.

1 Like

Let’s go :muscle: As always, thank you for your attention, Matej.

1 Like

Hi again Matej,

I think I understand where the problem is. This bug is directly related to loading images in the query loop. Because in the loop, loading images usually involves a lot of layout shifts.

In the code you shared, there are no images in the loop. So there is never a problem with it.

Please watch the video below. When I click on the next page, first there is a jump due to loading images, then after 1500 milliseconds (which I have set), the scroll up happens without any problem. This is why if the loop is at the top of the page, scrolling doesn’t happen smoothly because it jumps to the desired selector.

Thank you

Hmm, good observation. But, this still looks like the Scroll To works as intended, just that jump, because of the images, makes it not visible.
If you set fixed height of the image, I suppose the issue goes away?

1 Like

Hi Matej,

If you set fixed height of the image, I suppose the issue goes away?

Yes, the problem will be completely solved.

Also, on another website where I use load more for query loop, the loading of images after clicking on the load more button is such that there is a lot of jumping. For example, in the screenshot below, the image is loading but has its height. But the other two images are not loaded yet and their place remains empty for 0.5 seconds, which causes the content to jump.

So it seems that these two cases are quite similar to each other.

Ok, thanks for the info. Regarding this, I would say that “Scroll to” and “image load” issues are different, not related to one and the other, in the sense of a code behind and a solution.

For images, you will have to figure out how to load it faster, that may be caching, loading a placeholder, or setting a fixed size. Maybe even disable lazy loading.

1 Like