reactjs / reactjs/react.dev

[Bug]: Example: Scrolling to an element does not work for certain display widths

Open
#8,299 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug: unconfirmed
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

Summary

At certain window widths, I believe that the Example: Scrolling to an element looks as if it's not working.

I noticed this when I had my browser window set to half my screen width. Since I was using 1920x1080px, my browser's pixel width at the time would have been about 960px. From my initial testing around, I believe this happens for the width range of 935px to 1023px

From what I understand, the logic behind it is working, it just so happens that the increased width of the card / parent component causes it to appear though it isn't

Page

https://react.dev/learn/manipulating-the-dom-with-refs#example-scrolling-to-an-element

Details

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the linked “Example: Scrolling to an element” page and reproduce the behavior at widths between 935px and 1023px. Inspect the example and its card or parent layout to determine why scrolling appears ineffective; done means the target visibly scrolls correctly throughout that range.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.