The Fix: This is a “magic fix” specifically for Safari (iOS/macOS). By adding an invisible <input> element at the bottom of the HTML <body>, we force Safari to reset the viewport focus. This prevents the page from unexpectedly scrolling to the footer when the DocSearch modal closes.
Algolia’s docsearch.js is the gold standard for search functionality on technical blogs and documentation sites. However, a persistent bug has long plagued Safari users: when closing the search modal, the page instantly jumps to the bottom (Footer), significantly disrupting the user experience.
The Issue
This problem primarily affects iOS Safari and specific versions of macOS Safari. When the DocSearch modal disappears and the input focus is released, the browser appears to miscalculate the viewport position, triggering an unwanted scroll event.
The Solution
This solution originates from a GitHub community discussion. While the exact mechanics remain slightly obscure (it is likely related to how iOS Safari handles virtual keyboard focus and viewport bouncing), it works reliably in practice.
Simply add the following code just before the closing </body> tag in your HTML file:
<!-- Safari Fix: Prevent Algolia search close from scrolling to bottom -->
<div style="position: fixed; opacity: 0; pointer-events: none;">
<input type="text" />
</div>
</body>Code Breakdown
- Wrapper Div: Uses
position: fixedto ensure the element exists outside the standard document flow. - Input: An empty text input serves as a “bait” or anchor for the focus.
- Style: Properties like
opacity: 0andpointer-events: noneensure the element is invisible and non-interactive, ensuring it doesn’t affect your page layout or accessibility.
I have implemented this fix on this blog, and it has perfectly resolved the scroll-jumping issue on Safari.