> ## Content Index
> Fetch the complete content index at: https://www.magicpages.co/llms.txt
> Use this file to discover other available public pages before exploring further.

# Enhanced Search UI Compatibility for Complex Ghost Themes
- URL: https://www.magicpages.co/roadmap/enhanced-search-ui-compatibility-for-complex-ghost-themes/
- Published: 2025-06-23T20:01:24.000Z
- Updated: 2025-12-11T19:56:32.000Z
- Description: search UI now works seamlessly with complex Ghost themes like Principle, fixing mobile Safari scroll issues and improving compatibility through direct DOM.
- Author: Jannis Fedoruk-Betschki
- Tags: Roadmap & Changelog

A few months ago, I received a report from a customer using the [Principle theme](https://highfivethemes.com/themes/principle/?ref=magicpages.co) on their website in combination with the newly launched beta for the [Advanced Search on Magic Pages](https://www.magicpages.co/roadmap/better-search-on-pro-plans/).

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:

[v1.7.0 by betschki · Pull Request #9 · magicpages/ghost-typesenseSummary by CodeRabbit Bug Fixes Improved scroll behavior on mobile WebKit browsers for certain Ghost themes. Fixed text sizing issues by replacing rem units with scalable CSS variables for consi…![](https://www.magicpages.co/content/images/icon/pinned-octocat-093da3e6fa40-96.svg)GitHubmagicpages![](https://www.magicpages.co/content/images/thumbnail/9)](https://github.com/magicpages/ghost-typesense/pull/9?ref=magicpages.co)

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:

1. Head over to the "Search" page in your Customer Portal
2. Click on "Save Search Configuration"
3. The backend will automatically download the newly released v1.7.0 and deploy it on your site