reactjs / reactjs/react.dev

[docs beta] "Scrolling to an element" example does not work on Safari

Open
#4,846 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Checking the beta docs, I noticed that one of the examples was not working. At first it was not working at all, but after I added a style of overflow-x: auto to the <ul> element, then I could see the desired effect after clicking on the buttons. I could later check that the example works as expected (without any changes in Chrome). My first guess is that Safari doesn't scroll because the element has an implicit overflow as visible.

Please note that this issue is also present on the challenge 3, as it basically uses that same principle to scroll the images.

Steps
  1. Open https://beta.reactjs.org/learn/manipulating-the-dom-with-refs#example-scrolling-to-an-element on Safari
  2. Click on the buttons

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 by reproducing the example at the beta React docs “Scrolling to an element” section in Safari, then compare it with challenge 3, which uses the same scrolling principle. Investigate the reported overflow behavior and verify that both examples work as expected when their buttons are clicked, without manual style changes.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.