[Bug]: URL with Hash ('#') in Storybook Do Not Scroll to Correct Position (ID Name)

jb-asi commented 9 months ago

Describe the bug

URLs with hashes ('#') and fragment IDs that lead to elements with id attributes do not scroll to the correct position when opening a fresh Storybook page from such URLs.

To Reproduce

Go to a Storybook page of sufficient height, get the URL of an anchor.
Create a new tab, paste the URL, and enter it into the search bar.
Notice that the linked ID is not in view and that the viewport is too high on the page.

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-actions: 7.5.3 => 7.5.3 
    @storybook/addon-docs: 7.5.3 => 7.5.3 
    @storybook/addon-essentials: 7.5.3 => 7.5.3 
    @storybook/addon-interactions: 7.5.3 => 7.5.3 
    @storybook/addon-links: 7.5.3 => 7.5.3 
    @storybook/addons: 7.5.3 => 7.5.3 
    @storybook/blocks: 7.5.3 => 7.5.3 
    @storybook/builder-vite: 7.5.3 => 7.5.3 
    @storybook/react: 7.5.3 => 7.5.3 
    @storybook/react-vite: 7.5.3 => 7.5.3 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    storybook: 7.5.3 => 7.5.3

Additional context

Nuances:

This also occurs on the Storybook documentation site itself. It could be the same issue.
This issue does not occur for IDs that are in the initial viewport. Take this page for example (of the Storybook doc's site):
- https://storybook.js.org/docs/writing-stories/args
- If you go to the first ID (in view upon initial load), scroll is successful: https://storybook.js.org/docs/writing-stories/args#args-object
- If you go to the last ID (not in view upon initial load), scroll fails and ends too high on the page: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
- This happens in a private Storybook as well.
- (edit - added 11/18:) If you go to the last IDs link in a new tab without traveling to that browser tab (until the page has loaded by waiting a few seconds), the page will scroll to the correct position.

jb-asi commented 9 months ago

ℹ️ If there is any chance this was not communicated clearly, this issue is occurring within a privately deployed Storybook-documentation site as well, not only the Storybook's public documentation site; but it is indeed occurring on the Storybook's public documentation site as well. Mentioning due to the recent label changes. Thank you!

jb-asi commented 8 months ago

Commenting at just the right frequency to not let this issue go stale.

To reiterate, this is not only happening on the documentation site. It happens in a private Storybook.

jb-asi commented 7 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 7 months ago

Commenting at just the right frequency to not let this issue go stale.

anhnguyn commented 7 months ago

Having the same problem on Storybook v7..

jb-asi commented 6 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 6 months ago

Note: This issue is still occurring on April 10th.

jb-asi commented 6 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 5 months ago

Commenting at just the right frequency to not let this issue go stale.

Note: This issue is still occurring on May 13th.

jb-asi commented 4 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 4 months ago

Commenting at just the right frequency to not let this issue go stale.

kylegach commented 4 months ago

The documentation website portion of this has been fixed!

I updated the labels once more to reflect that.

jb-asi commented 3 months ago

The documentation website portion of this has been fixed!

I updated the labels once more to reflect that.

Confirmed - works like a charm on the documentation website. Thank you for swapping the tag, too.

jb-asi commented 3 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 2 months ago

Commenting at just the right frequency to not let this issue go stale.

andrei-hernandez commented 2 months ago

Having the same error on v7

jb-asi commented 2 months ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 1 month ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 1 month ago

Commenting at just the right frequency to not let this issue go stale.

jb-asi commented 3 weeks ago

Commenting at just the right frequency to not let this issue go stale.

Alex-Kizilov commented 2 weeks ago

I confirm. I have the same problem on version 8.3.3 of the storybook.

storybookjs / storybook