algolia / algolia/docsearch

Does not scroll to result on current page in Safari

Open
#1,397 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.4k
Forks
439
Avg merge
14h 32m
Merged PRs (30d)
19

Description

## 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Safari 15.4 behavior with the steps in the issue, including toggling scroll-behavior. Then inspect packages/docsearch-react/src/DocSearchModal.tsx around the referenced line and compare current-page navigation with modal closing. Done means a current-page result reaches the correct section reliably without causing a jump when the modal closes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, search
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.