reactjs / react.dev

The React documentation website
https://react.dev/
Creative Commons Attribution 4.0 International
11.06k stars 7.56k forks source link

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

Open DiegoCardoso opened 2 years ago

DiegoCardoso commented 2 years ago

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
MostlyEmre commented 2 years ago

The culprit is the scrollIntoView(). The method is not fully supported by Safari. You can make it work partially by changing behavior: 'smooth' to behavior: 'auto' as smooth is not currently supported by Safari. [0]

[0] https://caniuse.com/?search=scrollIntoView