Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NEXT-1053] Scrolling doesn't work in production build with app #48852

Closed
1 task done
goenning opened this issue Apr 26, 2023 · 2 comments · Fixed by #48863
Closed
1 task done

[NEXT-1053] Scrolling doesn't work in production build with app #48852

goenning opened this issue Apr 26, 2023 · 2 comments · Fixed by #48863
Assignees
@timneutkens
Labels
linear: next Confirmed issue that is tracked by the Next.js team.

Comments

@goenning
Copy link

goenning commented Apr 26, 2023 •
edited by timneutkens
Loading

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.4.1
      Yarn: 1.22.19
      pnpm: 7.6.0
    Relevant packages:
      next: 13.3.2-canary.6
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/aptabase/buildwith.app

To Reproduce

Clone https://github.com/aptabase/buildwith.app and run locally. It'll scroll to top on every page navigation because scrollRestoration is false.

Visit https://buildwith.app/ (hosted on Vercel). Navigation between pages does not scroll to top

Describe the Bug

Navigation between pages does not scroll to top when scrollRestoration is false and hosted on Vercel.

Expected Behavior

Navigation between pages should scroll to top when scrollRestoration is false and hosted on Vercel.

Which browser are you using? (if relevant)

Brave 112.0.5615.138 and Safari 16.4

How are you deploying your application? (if relevant)

Vercel

NEXT-1053
@goenning goenning added the bug Issue was opened via the bug report template. label Apr 26, 2023
@timneutkens
Copy link
Member

The experimental.scrollRestoration has no effect on app which you're using.

What I've found is that it only happens on production builds, it's unrelated to if that's on Vercel or not.
Here's two sandboxes, it happens only on the production sandbox.

Will investigate further why that is the case.

@timneutkens timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label Apr 26, 2023
@timneutkens timneutkens changed the title scrollRestoration doesn't work when deployed to Vercel [NEXT-1053] scrollRestoration doesn't work when deployed to Vercel Apr 26, 2023
@timneutkens timneutkens self-assigned this Apr 26, 2023
@timneutkens timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels Apr 26, 2023
@timneutkens timneutkens changed the title [NEXT-1053] scrollRestoration doesn't work when deployed to Vercel [NEXT-1053] Scrolling doesn't work in production build with app Apr 26, 2023
@timneutkens timneutkens mentioned this issue Apr 26, 2023
Merged
timneutkens added a commit that referenced this issue Apr 26, 2023
@timneutkens
Fix scrolling on navigation in app (#48863)
da2804f 
## What?

When investigating #48852 I found that when there's a `segmentPath` set
in the `focusAndScrollRef` it would compare that entire path with the
`segmentPath` of the layout-router. This logic works in cases where the
entire page is rendered but doesn't take into account cases where for
example a suspense boundary is triggered below the common layout.

Because of the order `useEffect` is run in we can already assume that if
a more specific match existed it would have scrolled there. As that is
not the case in e.g. #48852 it ended up opting out of scrolling
entirely. In order to fix that the logic needs to be different, it needs
to check if the layout-router's `segmentPath` matches, if it matches
every level then we can apply scrolling in that layout-router.

## How?

Implemented the opposite of the current logic, running `.every` on the
layout-router segmentPath instead of on the router provided segmentPath.

Fixes #48852
Fixes NEXT-1053

Related PR #48862

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation or adding/fixing Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md



## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@timneutkens timneutkens

Labels
linear: next Confirmed issue that is tracked by the Next.js team.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix scrolling on navigation in app vercel/next.js
2 participants
@goenning @timneutkens