search

sycamore-rs / sycamore

A library for creating reactive web apps in Rust and WebAssembly
https://sycamore-rs.netlify.app
MIT License
2.72k stars 145 forks source link

Book (website) routing not properly updating #648

Open lukechu10 opened 7 months ago

lukechu10 commented 7 months ago

Describe the bug When navigating to a new page in the Book, there is sometimes what seems to be a race-condition which causes the following visual bug to happen: image Relevant Discord discussion

To Reproduce Steps to reproduce the behavior:

  1. Go to https://sycamore-rs.netlify.app/docs/getting_started/hello_world
  2. Click on another page from the sidebar, e.g. "Hello World!"
  3. (Maybe) observe the visual bug.

Environment

Saplyn commented 6 months ago

It seems that the book works normal now. Edge Version 121.0.2277.4 (Official build) stable app, beta channel (64-bit)

lukechu10 commented 6 months ago

The annoying part is that I'm only able to reproduce this sometimes and always when I think I've solved the issue. So I'll leave this open for now until I'm more certain that it's fixed.

steven89 commented 4 months ago

I can consistently reproduce on Chromium: 122.0.6261.69:

  1. navigate to https://sycamore-rs.netlify.app/ (navigating directly to the home page or reloading on the homepage if I come from another page)
  2. press either
    • "Get Started" button in the middle of the page
    • "Book" menu at the top
  3. Navigating within the docs with the links now creates rendering issue, as well as scrolling the left-side menu
  4. reloading the page while in the docs fixes the rendering

Left side menu scrolling issue:

Screenshot 2024-02-28 at 10 02 55 AM
steven89 commented 4 months ago

Also once in the docs (after a reload) clicking on a latest version link ("For up-to-date documentation, see the latest version (v0.8).") restarts the rendering issue, again reloading the page afterwards fixes it.

Hmikihiro commented 4 months ago

I can reproduce on Firefox 123.0 for MacOS.

When I clicked 'Get Started', the <div class="flex w-full"> tag was created twice. The website updates only the second <div class="flex w-full">tag and leaves the others unchanged after I clicked a link on the navigation. In addition to, right-side menu for 'Getting Started' was overwritten by one for 'Basics'

https://github.com/sycamore-rs/sycamore/assets/29543842/88296866-c9f8-4847-8a38-6e930eb5729c

lukechu10 commented 4 months ago

I can reproduce on Firefox 123.0 for MacOS.

When I clicked 'Get Started', the <div class="flex w-full"> tag was created twice. The website updates only the second <div class="flex w-full">tag and leaves the others unchanged after I clicked a link on the navigation. In addition to, right-side menu for 'Getting Started' was overwritten by one fo

Ah thanks for digging into this. Apologies I've just been really busy with other things lately so haven't even gotten a chance to look at this. But this does make it clearer what went wrong!

lukechu10 commented 4 months ago

Ok another test case, starting on one of the doc pages and clicking on the logo in the top-left doesn't seem to work either.

Hmikihiro commented 4 months ago

Clicking on the "News" also works like clicking on the logo.

https://github.com/sycamore-rs/sycamore/assets/29543842/7f004313-798d-4491-803a-bea0eda424e3