docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

Does not scroll to result on current page in Safari

Open IanVS opened this issue 3 years ago • 1 comments

Description

I find that using safari 15.4, trying to navigate to a search result that is on the current page does not work. There's a bit of flicker on the page, so perhaps it is scrolling to the correct location, but then it scrolls immediately back to the top. Setting scroll-behvaior:smoooth; prevents this, but causes other issues (closing the search modal causes a jump to bottom and scroll back to the top).

This might be somewhat related to https://github.com/algolia/docsearch/issues/1260.

I also wonder if https://github.com/algolia/docsearch/blob/82b73a7dc6850d936ee7350460b1feb1cc64ca6a/packages/docsearch-react/src/DocSearchModal.tsx#L328 could be causing the issue.

Steps to reproduce

  1. Go to https://docs.astro.build/en/getting-started/
  2. Open the inspector, click on the html element, and find where scroll-behavior: smooth is set, and disable it. (it's set on :root in a media query)
  3. Click on the search box in the top
  4. Search for "join our community" (which is lower down on the page
  5. Notice that the page does not navigate to the section.
  6. Refresh the page so that scroll-behavior is reset, and try again. ~~7. Notice that it works.~~ I take it back. It only works sometimes.

Expected behavior

Should be taken to the correct location in the current page

Environment

  • OS: macOS
  • Browser: safari 15.4
  • DocSearch version: 3.1.0

IanVS avatar May 27 '22 15:05 IanVS

I did a little more experimenting. If I remove the line I mentioned above, window.scrollTo?.(0, initialScrollY);, that indeed fixes this particular problem, but it causes https://github.com/algolia/docsearch/issues/1260: when I close the modal without choosing a result, I scroll to the bottom.

IanVS avatar May 27 '22 15:05 IanVS