https://kotlinlang.org logo
Join Slack
Powered by
Hey, I got a little question about a behaviour I s...
# kobweb
c
Hey, I got a little question about a behaviour I see on my site where I'm not certain if this is only an issue for me or also for others... I have multiple pages. The 
first
page has a couple of sections and is quite long (multiple viewports high). When I'm somewhere in the middle and I click on a button to go to a new page, the new page loads perfectly (albeit it seems that the viewport seems to scroll to the top before loading the new page). Now, if the new page has a little height of 1 viewport + a couple of pixels and I want to return to the previous page, the first page will load up at the scroll position of the 2nd page. This is not really that big of a deal, but it won't be a nice UX for the actual user whom just might want to read some info about that section again. Is this an issue that is known? Is this only an issue for my site? What would be a possible way to debug this? I'm not sure if this is very clear what I actually have happening, so if any more information is needed don't hesitate to ask!
d
How are you returning back to the original page? With the back button?
c
Yes, by using the back button in the actual browser. Or using a mouse button linked to the same shortcut.
d
So this is my (very small) blog site built with Kobweb
Can you click on one of the posts, scroll down halfway, and then press back? Are you seeing the same behavior there?
You might want to check your dev console too, just to make sure there wasn't an exception thrown or anything like that
c
Not really, because the first page is smaller than the second page.
d
So I think you can try this... visit https://bitspittle.dev/blog/2022/staticdeploy then type https://bitspittle.dev/blog/2023/clouddeploy into the URL and press enter
you should now be able to move back and forth between the pages, and I think Kobweb should intercept the forward and back buttons, not sure though
c
Hmm, does not seem to give me the same result. I'll try and take a look into the console if that does anything for me... perhaps I missed something. I can also try to export and upload it as a static site so you might be able to see what I mean by visiting the url.
d
Sure. Meanwhile, I'm going to try to create a dummy site from scratch, one sec
c
If it's possible, could you visit this site. Scroll to 
services
till it's on the top, click on 
read more
for 
tutoring
and go back to the previous page?
d
Went back to the same place
(Services was still on top)
I'll take a video
c
... Really 😅
d
Oh, I clicked on "Services" in the top bar
so the URL was 
/#services
Let me try just by manually scrolling
Ah yeah that didn't work
c
I just noticed that it seems to be an issue on Chrome (Brave)... -.- Mozilla seemes to work as it should xD
d
Yeah seeing it in Chrome
Let me see if I can repro with my empty project
c
Ah, but mozilla does have the same issue when on this page, scrolling down till 
Web Development
is on the top, clicking 
Learn more
and returning to the previous page 😅
This project of mine is open source if that might help?
d
If I can reproduce it in this empty project then I should be fine, let's see
I don't think Kobweb is doing the restoring of scrollbar positions, but if it is, probably I would just need to defer setting it
Just guessing so far: Feels like maybe you're going back to another page, and then maybe the DOM is getting populated too slowly, so the vscroll position is set too soon, and gets clamped. Then the DOM gets extended with more content, and the vscroll seems wrong.
c
Yeah, I was thinking along those lines as well, albeit it not that detailed since I'm still not all to sure about the specifics of the DOM structure and everything regarding web 😅
d
Doesn't repro with my nearly empty project
It's really simple, looks like this:
Copy code
// Index.kt
@Page
@Composable
fun HomePage() {
    Box(Modifier.fillMaxWidth().height(3000.px).overflow { y(Overflow.Scroll) }, contentAlignment = Alignment.Center) {
        Link("/second", "Go to the second page")
    }
}

// Second.kt
@Page
@Composable
fun SecondPage() {
    Box(Modifier.fillMaxWidth().height(3000.px).overflow { y(Overflow.Scroll) }, contentAlignment = Alignment.Center) {
        Link("/", "Go back to the first page")
    }
}
So my guess is your site is doing something that's affecting this. Maybe things are animating in based on an intersection observer normally?
c
Ah, but the second page has the same height which does not show this issue with me as well. As far as I noticed, the second page should be smaller in height than the first page.
Hmm... Could be, I could try to remove the animations and make it as barebone as possible and then add things to see what actually is triggering the issue. Maybe even start a new project and just try to copy-paste possible culprits xD
d
That could be really helpful
Sorry I don't have anything more confident to recommend yet
c
Not a problem, I was already thinking that it might just be something within my project only since I couldn't find anything regarding this issue 😅 Thanks anyways to help me look into it and thinking along for a possible fix!
d
NP, feel free to stay in touch. I'll poke around the Kobweb code a bit to make sure it isn't something I can do on my end
The navigation code is now.... fairly old at this point, I can't remember how it's all connected off the top of my head
Yeah, between looking at my code and conferring with ChatGPT in general, it seems like dynamically loaded elements are most likely the problem
So now I just tried your site and the back button worked
Maybe things got cached? So now some loading is happening faster?? 🤪
Doesn't work first two times. I try doing a full refresh and do it a third time and it works
c
.... Why... 😅
d
Not sure
It seems consistently that if I hard refresh first (shift+reload button) then it works
Can you try that just to double check?
In a pinch, I might be able to implement my own logic for manually setting the vscroll position
One thing that's tough with something like Compose HTML is the javascript creates the page, and then that means the page is populated one beat later. So this is probably a timing issue.
c
Hmm, I don't see the same behaviour in my browser 😅
And timing issues are the worst xD *one of the worst
d
Well if it's timing, it could come down to how long it's taking a background thread to process something
Sorry you're having this issue. I know it's not fun!
c
Haha, not a problem. For now it's not that big of a deal. And perhaps it's really just an issue that I myself created, so I'll have to investigate that some more xD
d
I wouldn't assume it's just you! I think you're just checking carefully 🙂
c
In any case, thanks for helping me investigate this. I'll keep you posted if I find anything on my end! Might take a little while since I have some other things to attend to in the meantime 😅
👍 1
🤞 1
d
Good luck! And no promises but feel free to DM me your open source repo and I can possibly take a look
c
Hey David, long time since I was working on this issue so I'm not sure if you still know what it's about. But I wanted to give an update since I found what the problem is. On my long page I had a button which had an 
onClick
where I then tried to navigate by using 
pageContext.router.navigateTo("/projects")
. Doing it like this messed up the scroll location of the long page when coming back to it. What I did now is to wrap the button in a 
A
and let that handle the navigation. Which does not mess up the scroll location of the long page when returning to it.
d
Thanks for the update!
I guess the browser gets to be smarter about how it handles navigation than I can 🙂
I think my general advice has been to use 
router.navigateTo
so I'll need to think about that a bit more
Open in Slack
PreviousNext
Powered by