Page scroll to the bottom of page when closing the modal on Safari #1260

daolf · 2022-01-12T22:51:41Z

Description

On Safari, when opening the search modal and then closing it without having made any search, the page scroll to the bottom of the page.

When searching something, it looks like the search box behave nicely.

Safari version: 14.1
Docsearch version: 3.0.0-alpha.42

Enregistrement.de.l.ecran.2022-01-12.a.23.47.27.mov

Steps to reproduce

Open Safari 14.1
Go to [https://www.scrapingbee.com/documentation]
Type cmd + K to open the modal
Press esc to close it
Window scroll to the bottom of the page

Live reproduction:

https://www.scrapingbee.com/documentation

Expected behavior

It should not scroll to the bottom of the page

Environment

OS: macOS 11.3.1
Browser: Safari 14.1
DocSearch version: 3.0.0-alpha.42

The text was updated successfully, but these errors were encountered:

shortcuts · 2022-01-12T23:04:34Z

Hey, are you able to reproduce on our documentation? docsearch.algolia.com

(Sorry I'm not on a computer rn)

daolf · 2022-01-12T23:08:36Z

No, I was not, but it looks like at least one other project had the same issue:

fix(v2): prepend docsearch modal to body element facebook/docusaurus#4188

I'm instantiating the search in the simplest way:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<div class="mb-19 pr-15">
    <div id="search" placeholder="Search">
    </div>
</div>
<script>
    window.docsearch({
        // Your Search API Key
        apiKey: '<apiKey>',
        // The index populated by the DocSearch scraper
        indexName: 'scrapingbee_docs',
        // Your Algolia Application ID
        appId: '<APP-ID>',
        // Replace inputSelector with a CSS selector
        // matching your search input
        container: '#search',
        // Set debug to true to inspect the dropdown
        debug: false,
    });
</script>

daolf · 2022-01-13T09:12:19Z

Ok so I found out how to fix this.

After noticing that this bug didn't happen on Netlify deploy preview I wanted to understand why.

On Deploy preview mode, Netlify adds a "feedback" overlay. That overlay seemed to fix the bug.

Conclusion

Adding an empty input inside a fixed div fixes it.

Here is the updated structure of the HTML of our doc page:

<!DOCTYPE html>
<html lang="en">
    {{ partial "head" . }}
    <body>
        <div id="wrapper">
            <div id="content">
            <!--SearchBar-->
            <!--Content-->
            </div>
        </div>
        <!--Magic Fix-->
        <div class="fixed">
            <input type="text">
        </div>
    </body>
</html>

Looking at other issues it probably has to do with tabindex, like it looks like Safari doesn't like when you close the popup and the browser doesn't have any other input / "tabindexable" element to focus. The Netlify preview feature didn't add an input, but an iframe.

But replacing the iframe by the empty input fixes it 🤷‍♂️

shortcuts · 2022-01-13T10:09:04Z

Adding an empty input inside a fixed div fixes it.
The Netlify preview feature didn't add an input, but an iframe.

So anything that fills the DOM along with the DocSearch component should fix this issue?

This is good to know, thanks for investigating, I'll try to reproduce in multiple cases to see if it's something we can handle

daolf · 2022-01-26T11:58:23Z

I don't know if it is anything or a particlular kind element that needs to be focusable by the browser.

jackmcdade · 2022-01-26T15:58:21Z

We're having this issue on https://statamic.dev and haven't been able to find a workaround yet.

Our open issue: statamic/docs#707

daolf · 2022-01-26T16:03:12Z

Hi there,

I was able to fix this on your dom by adding this just before the end of the body

daolf · 2022-01-26T16:03:30Z

Still have no idea why this works though

jackmcdade · 2022-01-26T16:05:39Z

Hi there,

I was able to fix this on your dom by adding this just before the end of the body

~~I tried that but it didn't work for me.~~ Ah yes, i had it near the end, but not the very last thing. It worked!

daolf · 2022-01-26T20:20:46Z

Great!

mdo · 2022-04-14T20:18:27Z

I've just encountered this issue as well in trying to update Bootstrap's docs to DocSearch 3. See twbs/bootstrap#35736. The problem can be seen in our staging deploy for that PR: https://deploy-preview-35736--twbs-bootstrap.netlify.app/docs/5.1/getting-started/introduction/.

Anything else we can do to help debug?

shortcuts · 2022-04-14T21:00:59Z

Hey, thanks for coming back to this @mdo.

Are you also testing with Safari 14? I'm not able to reproduce with Safari 15.x anymore

edit: managed to reproduce, you need to scroll a bit before hitting cmd k

mdo · 2022-04-14T21:24:28Z

Yup, still have it in latest Safari 15. I see it whenever I click into it or Cmd+K.

shortcuts · 2022-04-14T22:18:29Z

It seems that this part is triggered on escape 🤔 I'll try to investigate on the Autocomplete side. (cc @sarahdayan @francoischalifour if you want to double check)

sarahdayan · 2022-04-15T09:36:55Z

Likely related: algolia/autocomplete#592

mdo · 2022-04-29T01:04:55Z

@shortcuts Were you able to investigate this further? Let me know if I can be of help at all :).

DanielSGaspar · 2023-08-23T10:00:44Z

Ok so I found out how to fix this.

After noticing that this bug didn't happen on Netlify deploy preview I wanted to understand why.

On Deploy preview mode, Netlify adds a "feedback" overlay. That overlay seemed to fix the bug.

Conclusion

Adding an empty input inside a fixed div fixes it.

Here is the updated structure of the HTML of our doc page:
<!DOCTYPE html>
<html lang="en">
    {{ partial "head" . }}
    <body>
        <div id="wrapper">
            <div id="content">
            
            
            </div>
        </div>
        
        <div class="fixed">
            <input type="text">
        </div>
    </body>
</html>
Looking at other issues it probably has to do with tabindex, like it looks like Safari doesn't like when you close the popup and the browser doesn't have any other input / "tabindexable" element to focus. The Netlify preview feature didn't add an input, but an iframe.

But replacing the iframe by the empty input fixes it 🤷‍♂️

As you mention here, the issue is with the focus. So another fix would be to blur the input before closing the modal. This way safari will not try to search for another input to focus and this will also fix the issue.

ryanleichty · 2023-11-14T18:41:15Z

This issue also exists on https://remix.run/. When you're at the top of the page in Safari (v16.6) and open and close the modal with esc, it scrolls to the bottom of the page.

#### Reference Issues / PRs closes #2004 #### What does this implement/fix? Fixes the quick jump to bottom of the page in safari This is an existing bug in docsearch: algolia/docsearch#1260 #### Any other comments? No --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

jackmcdade mentioned this issue Jan 26, 2022

Closing the search modal jumps the page statamic/docs#707

Closed

shortcuts added the Needs investigation Investigation is planned but not started yet label Feb 9, 2022

mdo mentioned this issue Apr 14, 2022

v5.2.0: Migrate to DocSearch 3 twbs/bootstrap#36176

Merged

IanVS mentioned this issue May 27, 2022

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

Open

ReeceHumphreys mentioned this issue Dec 7, 2023

Dismissing the search box scrolls to the bottom of the page on Safari icerpc/icerpc-docs#368

Closed

Fredkiss3 mentioned this issue Mar 6, 2024

fix/weird jump to section on navigation with keyboard on safari modularcloud/explorer#413

Merged

jollydodo mentioned this issue Jul 30, 2024

Docsearch safari bug: goes to end of page if modal is closed thuliteio/doks#1264

Open

spudoodle mentioned this issue Jan 27, 2025

Fix page jump to bottom on safari tailwindlabs/tailwindcss.com#2013

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page scroll to the bottom of page when closing the modal on Safari #1260

Page scroll to the bottom of page when closing the modal on Safari #1260

daolf commented Jan 12, 2022 •

edited

Loading

shortcuts commented Jan 12, 2022

daolf commented Jan 12, 2022

daolf commented Jan 13, 2022

shortcuts commented Jan 13, 2022

daolf commented Jan 26, 2022

jackmcdade commented Jan 26, 2022 •

edited

Loading

daolf commented Jan 26, 2022

daolf commented Jan 26, 2022

jackmcdade commented Jan 26, 2022 •

edited

Loading

daolf commented Jan 26, 2022

mdo commented Apr 14, 2022

shortcuts commented Apr 14, 2022 •

edited

Loading

mdo commented Apr 14, 2022

shortcuts commented Apr 14, 2022 •

edited

Loading

sarahdayan commented Apr 15, 2022

mdo commented Apr 29, 2022

DanielSGaspar commented Aug 23, 2023

ryanleichty commented Nov 14, 2023

Page scroll to the bottom of page when closing the modal on Safari #1260

Page scroll to the bottom of page when closing the modal on Safari #1260

Comments

daolf commented Jan 12, 2022 • edited Loading

Description

Steps to reproduce

Expected behavior

Environment

shortcuts commented Jan 12, 2022

daolf commented Jan 12, 2022

daolf commented Jan 13, 2022

shortcuts commented Jan 13, 2022

daolf commented Jan 26, 2022

jackmcdade commented Jan 26, 2022 • edited Loading

daolf commented Jan 26, 2022

daolf commented Jan 26, 2022

jackmcdade commented Jan 26, 2022 • edited Loading

daolf commented Jan 26, 2022

mdo commented Apr 14, 2022

shortcuts commented Apr 14, 2022 • edited Loading

mdo commented Apr 14, 2022

shortcuts commented Apr 14, 2022 • edited Loading

sarahdayan commented Apr 15, 2022

mdo commented Apr 29, 2022

DanielSGaspar commented Aug 23, 2023

ryanleichty commented Nov 14, 2023

daolf commented Jan 12, 2022 •

edited

Loading

jackmcdade commented Jan 26, 2022 •

edited

Loading

jackmcdade commented Jan 26, 2022 •

edited

Loading

shortcuts commented Apr 14, 2022 •

edited

Loading

shortcuts commented Apr 14, 2022 •

edited

Loading