Summary
The StaticPageIframe component used to embed external content on /static routes is currently experiencing several critical UI and state management issues:
- Layout & Scroll: Users experience a "double vertical scrollbar". The component fails to accurately constrain the iframe's internal overflow, causing it to conflict with the main window's scroll. Additionally, the footer overlaps the content because the container height is not calculated or updated correctly.
- SPA Routing State Leak: When navigating between different
/static routes, SvelteKit retains the component instance. The $state variables (like frameHeight) cache the previous page's data, resulting in massive white spaces or clipped content because the height does not update dynamically for the new src.
- Infinite Loading (Silent Failure): The component relies entirely on a
postMessage event from the external source to remove the loading state. If the external site throws a 500 error, a 404, or the user's connection drops, the UI hangs infinitely on "Loading content...".
Behavior reported by APIPAWE KATOTO Daniel:
https://openfoodfacts.slack.com/files/U0ANLEUGHMM/F0AMZH4NGLW/screen_recording_2026-03-21_at_21.55.23.mov
Expected behavior
- The iframe should seamlessly integrate into the page with only the main window scrollbar visible.
- The footer should sit correctly below the iframe content without overlapping.
- Navigating between static pages should reset the component state and recalculate the height for the new content.
- Network or external server failures should be caught by a timeout, displaying a graceful error state rather than an infinite loader.
Technical context for the fix
The solution requires enforcing strict overflow CSS constraints, forcing iframe re-instantiation via Svelte's {#key} block to clear the History API and component state, and adding a timeout boundary for the message event listener.
Summary
The
StaticPageIframecomponent used to embed external content on/staticroutes is currently experiencing several critical UI and state management issues:/staticroutes, SvelteKit retains the component instance. The$statevariables (likeframeHeight) cache the previous page's data, resulting in massive white spaces or clipped content because the height does not update dynamically for the newsrc.postMessageevent from the external source to remove the loading state. If the external site throws a 500 error, a 404, or the user's connection drops, the UI hangs infinitely on "Loading content...".Behavior reported by APIPAWE KATOTO Daniel:
https://openfoodfacts.slack.com/files/U0ANLEUGHMM/F0AMZH4NGLW/screen_recording_2026-03-21_at_21.55.23.mov
Expected behavior
Technical context for the fix
The solution requires enforcing strict overflow CSS constraints, forcing iframe re-instantiation via Svelte's
{#key}block to clear the History API and component state, and adding a timeout boundary for themessageevent listener.