https://www.scale-ni.russam.me/portfolio/
I’ve got an LL bar that (currently) opens 3 LL’s in a SPro.
Each LL contains an inStacks Gallery that sources its content from a TotalCMS gallery.
1st LL is set to open on page load
Note: This arrangement is currently for tablet+ so no LL’s on mobile
Problem: When I click on one of the LL menu items the page jumps to the top.
Tested in both Chrome and Safari.
What happens with a generic test case for example with just some text in each limelight and nothing else on a page?
(I presume you have the scroll into view turned off in Limelight?)
Also, I’m not sure if it is related but you have a lot of errors in the console coming from your inline SVG code. It is always possible that this could invalidate the layout and cause a repaint when something major on the page changes - more reason to make a simple test case page to isolate the problem
I’ve just tried it with only headers/paras in the LL’s and I’m getting the same problem.
Scroll into View is off.
The svg errors are only appearing in Safari, Chrome has no errors. The 100vh is what makes the swooshed fill the browser height and work in both Safari and Chrome so lord knows why Safari doesn’t like them.
I’ve got to go and do some stuff around the house before Suzie gets back so I’m leaving this for now but I’ll be back later.
I think its something else on the page … I’ll make a page with just the LL+content and do a bit of debugging
The LL demo page has a couple of bars on it that don’t jump to the top which is why I suspsect
It is a combination of other things / settings. There was a bug previously where scroll into view was always on but I fixed that ina previous update. - in addition, it is jumping not doing an animated scroll so I’m pretty sure it is not that.
The bar does not use links so there is no chance of it being a blank anchor effect either.
Ok then, fixed it but I don’t fully understand (though I have theories) why the problem occurs.
Here’s a simple page with it working: https://www.scale-ni.russam.me/test/
The fix only works if I add content below the SPro thats the target for LL.
Theory:
It wasn’t jumping to the top of the page, its jumping up the height of the injected content, it just so happened that the distance to the top of the page is shorter than the injected content.
I added contend below the proper one on the Portfolio page and it works there too (content now removed, I’ll add some real stuff shortly).
Good detective work.
That does make sense - it is just that the existing browser scroll top position is going out of range when the content is added (i.e. it becomes > 100%). There is obviously a fallback in the browser code that sets the scroll top to 0 in such cases as it is the only absolutely guaranteed value that will remove the error.