search

algolia / docsearch

:blue_book: The easiest way to add search to your documentation.
https://docsearch.algolia.com
MIT License
3.97k stars 384 forks source link

Does not scroll to result on current page in Safari #1397

Open IanVS opened 2 years ago

IanVS commented 2 years ago

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

IanVS commented 2 years ago

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.