https://kotlinlang.org logo
#kobweb
Title
# kobweb
c

Christiano

12/01/2023, 10:45 PM
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

David Herman

12/01/2023, 10:46 PM
How are you returning back to the original page? With the back button?
c

Christiano

12/01/2023, 10:47 PM
Yes, by using the back button in the actual browser. Or using a mouse button linked to the same shortcut.
d

David Herman

12/01/2023, 10:48 PM
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

Christiano

12/01/2023, 10:49 PM
Not really, because the first page is smaller than the second page.
d

David Herman

12/01/2023, 10:52 PM
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

Christiano

12/01/2023, 10:57 PM
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

David Herman

12/01/2023, 11:00 PM
Sure. Meanwhile, I'm going to try to create a dummy site from scratch, one sec
c

Christiano

12/01/2023, 11:04 PM
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

David Herman

12/01/2023, 11:05 PM
Went back to the same place
(Services was still on top)
I'll take a video
c

Christiano

12/01/2023, 11:05 PM
... Really 😅
d

David Herman

12/01/2023, 11:06 PM
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

Christiano

12/01/2023, 11:07 PM
I just noticed that it seems to be an issue on Chrome (Brave)... -.- Mozilla seemes to work as it should xD
d

David Herman

12/01/2023, 11:07 PM
Yeah seeing it in Chrome
Let me see if I can repro with my empty project
c

Christiano

12/01/2023, 11:10 PM
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

David Herman

12/01/2023, 11:11 PM
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

Christiano

12/01/2023, 11:14 PM
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

David Herman

12/01/2023, 11:14 PM
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

Christiano

12/01/2023, 11:16 PM
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

David Herman

12/01/2023, 11:21 PM
That could be really helpful
Sorry I don't have anything more confident to recommend yet
c

Christiano

12/01/2023, 11:22 PM
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

David Herman

12/01/2023, 11:22 PM
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

Christiano

12/01/2023, 11:32 PM
.... Why... 😅
d

David Herman

12/01/2023, 11:32 PM
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

Christiano

12/01/2023, 11:36 PM
Hmm, I don't see the same behaviour in my browser 😅
And timing issues are the worst xD *one of the worst
d

David Herman

12/01/2023, 11:36 PM
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

Christiano

12/01/2023, 11:37 PM
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

David Herman

12/01/2023, 11:38 PM
I wouldn't assume it's just you! I think you're just checking carefully 🙂
c

Christiano

12/01/2023, 11:42 PM
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

David Herman

12/02/2023, 12:00 AM
Good luck! And no promises but feel free to DM me your open source repo and I can possibly take a look