Fix Algolia Search Box Auto-Scrolling Issue in Safari
TL;DR: Algolia’s
docsearch.jscan cause Safari to auto-scroll to the bottom after closing the search box. To fix this, add a fixed-position input field snippet (<div class="fixed"><input type="text" /></div>) at the bottom of your HTML<body>.
Issue Description
Algolia is a company that provides hosted search engine services widely used for technical blogs, open-source projects, and other site search solutions. Its free plan, in particular, has made it a popular choice among programming bloggers and developers.
However, when using the official docsearch.js to create a search box, the following issue may occur in Safari: After closing the search box, the page auto-scrolls to the bottom, which severely affects the user experience.
The video below demonstrates the issue:
Solution
I encountered this problem on my blog for a long time. After numerous attempts, I stumbled upon a discussion on GitHub, where user daolf shared a snippet of code. While the exact reason it works remains unclear, it effectively resolves the issue.
Simply add the following code snippet to the bottom of the <body> in your HTML file:
<!-- Magic Fix: Resolve the Safari issue where the page scrolls to the bottom after closing the search box -->
<div class="fixed">
<input type="text" />
</div>
</body>Results
This code has been successfully implemented on my blog. After testing, the issue with the search box in Safari has been completely resolved. If you encounter a similar problem, you may want to give this solution a try.