fix(web): fix landing page search on iOS/mobile devices#1021
Merged
Conversation
Two fixes: 1. Add Cloudflare Pages `_headers` to serve `wasm.*.pagefind` with `Content-Type: application/wasm`. WebKit (iOS Safari/Chrome) requires the correct MIME type for WebAssembly.instantiateStreaming(). Without it, WebKit consumes the response body during the failed streaming attempt, leaving the ArrayBuffer fallback with an empty buffer. The WASM then fails to initialise and all searches return "no results". 2. Move the `<dialog>` element out of the `<nav>` and make it a direct sibling. The nav has `backdrop-filter: blur()` which creates a CSS stacking context. Nesting a dialog inside such a context can cause WebKit to mis-position the dialog's backdrop relative to the nav rather than the full viewport. Closes #1018 Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Deploying agentv with
|
| Latest commit: |
5ee3b88
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d23730f4.agentv.pages.dev |
| Branch Preview URL: | https://fix-1018-mobile-search.agentv.pages.dev |
…g from allagents - Replace minimal Pagefind CSS with full Starlight-style theming: document page icons, tree diagram connectors for sub-results, hover/focus outlines, compact result cards matching the docs search - Add @media (max-width: 480px) override: margin-top: 1rem, width: 95%, max-height: calc(100vh - 2rem) so the search frame uses most of the screen on small devices instead of leaving a large gap at the top (matches allagents implementation) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Search on the landing page returns "No results" on iOS devices (Safari and Chrome). Screenshot in #1018 shows "No results for p" on iOS Chrome.
Root Causes & Fixes
1. Wrong WASM MIME type (primary iOS bug)
Cloudflare Pages (Workers Sites) serves
wasm.en.pagefindasContent-Type: application/octet-stream. WebKit (iOS Safari/Chrome) is stricter than Blink about response body consumption whenWebAssembly.instantiateStreaming()fails a MIME check. The wasm-bindgen fallback then callsresponse.arrayBuffer()on an already-consumed body, the WASM fails to initialise, and Pagefind returns "no results" for every query. Chrome/Blink is lenient here — explaining why desktop/Android work but iOS doesn't.Fix:
apps/web/public/_headers— serveswasm.*files in/pagefind/asContent-Type: application/wasmsoinstantiateStreaming()succeeds on the first attempt.2. Dialog nested inside
<nav>withbackdrop-filterMoved
<dialog>to be a sibling of<nav>inside.av-root. Having it inside thebackdrop-filterstacking context can cause WebKit to mis-position the dialog in certain versions.3. Minimal Pagefind UI styling → full Starlight-style theming (parity with allagents)
The original CSS was minimal. Ported the full Starlight-style Pagefind CSS from the allagents sibling repo:
#06b6d4)4. Mobile dialog sizing (matches allagents)
Added
@media (max-width: 480px)override:margin-top: 1rem; width: 95%; max-height: calc(100vh - 2rem). The original4remtop margin wasted screen space on small devices.Before / After (mobile)
Closes #1018