search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127k stars 26.99k forks source link

<Link> breaks CSS `scroll-margin-top` while native <a> works as expected #51260

Open mitchuman opened 1 year ago

mitchuman commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.18
      pnpm: 8.5.1
    Relevant packages:
      next: 13.4.6-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

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

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/mitchuman/scroll-margin-issue

To Reproduce

Demo: https://scroll-margin-issue.vercel.app/

Compare <Link> and <a> with anchor/jump links (href="#...") that jump to elements with CSS scroll-margin-*

Describe the Bug

Elements jumped to with <Link> components don't have the scroll-margin-* applied. scroll-behavior: smooth also does not work for only for <Link> components.

:target selector also is not activated when viewed in devtools.

Expected Behavior

<a> tags work as expected where elements are scroll with the margin applied.

Which browser are you using? (if relevant)

Firefox Developer 115.0b3 (64-bit), Arc 0.107.0 (39372), Safari 15.4 (17613.1.17.1.13)

How are you deploying your application? (if relevant)

Vercel

mitchuman commented 1 year ago

Now realizing this is the same issue as https://github.com/vercel/next.js/issues/49612

OhYello commented 1 year ago

having the same issue, scroll padding and scroll margin doesn't seem to work when trying to navigate to anchor links for headers.

dylpckl commented 1 year ago

I have the same issue.

jahirfiquitiva commented 11 months ago

Facing the very same issue here 😬 using Next.js 14.0.3

OhYello commented 11 months ago

Issue still persists, don’t think it was ever fixed in next.js 13

QuentinScDS commented 6 months ago

still in 14.2.2 ...

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

QuentinScDS commented 6 months ago

Need this to make a clean website