A few months ago, I received a report from a customer using the Principle theme on their website in combination with the newly launched beta for the Advanced Search on Magic Pages.
The search UI was working on most devices, but had a distinct problem on iPhones using Safari: due to a custom scrollbar implementation (SimpleBar) the theme used, the search UI disabled scrolling on the entire site. Ouch.
Since I don't have an iPhone myself to test it, and the issue only affected a single theme (as far as I could tell), it took a while to get this fixed. However, a few minutes ago, I finally published an update that fixes the issue:
magicpages
While I was at it, I improved the overall structure, since that turned out to be the quickest and most sustainable way to deal with the issue at hand, caused by the iframe used by the original search UI.
What's New
The Ghost Typesense Search UI has been completely rebuilt from the ground up to ensure maximum compatibility with any Ghost theme, no matter how complex its styling or scrolling implementation.
Major Architecture Changes
From iframe to Direct DOM:
- Replaced the iframe-based approach with direct DOM injection
- The search modal now renders as a direct child of
<body>for better integration - Simplified event handling and removed complex cross-frame communication
Consistent CSS Isolation:
- All CSS classes now use the
mp-search-prefix to avoid conflicts
Enhanced Scroll Management:
- Proper body scroll locking with position preservation
- Fixed mobile WebKit browser scrolling issues
Upgrading
To get these improvements:
- Head over to the "Search" page in your Customer Portal
- Click on "Save Search Configuration"
- The backend will automatically download the newly released v1.7.0 and deploy it on your site