🔍 3-Layer Scroll Demo: Flutter in iframe with non-Flutter content

Demonstrating the 3-layer scenario: Parent Window → Iframe (non-Flutter app) → Flutter component

The Scenario

Layer 1: Parent Window (this page) Layer 2: Iframe (non-Flutter host app) Layer 3: Flutter (embedded via hostElement)
+------------------ Parent window (this page) -------------------+ | | | +-------- iframe (non-Flutter host app) ------------------+ | | | | | | | [ Header content - non-Flutter ] | | | | | | | | +--- Flutter embedded via hostElement ---+ | | | | | | | | | | | (Flutter ListView with items) | | | | | | | | | | | +----------------------------------------+ | | | | | | | | [ More HTML content below Flutter ] | | | | [ This content should scroll when Flutter is done ] | | | | | | | +---------------------------------------------------------+ | | | +-----------------------------------------------------------------+

✅ Expected Behavior

  1. User scrolls over Flutter component
  2. Flutter handles scroll (items move)
  3. Flutter reaches boundary
  4. Iframe's document scrolls next
  5. Iframe reaches boundary
  6. Parent window scrolls last

❌ PR 179703 Behavior

  1. User scrolls over Flutter component
  2. Flutter handles scroll (items move)
  3. Flutter reaches boundary
  4. scrollParentWindow() is called
  5. Parent window scrolls immediately!
  6. Iframe content is skipped!

Live Demo

The iframe below contains a non-Flutter app with Flutter embedded as a component. Try scrolling the Flutter content to its boundary.

📦 IFRAME - Non-Flutter app with embedded Flutter component

Why This Matters

When scrollParentWindow() is called from Flutter (inside the iframe), it scrolls window.parent - which is this page, not the iframe's document.

The non-Flutter content in the iframe is completely bypassed, breaking the expected scroll flow.

⬇️ Parent window content continues below ⬇️

Bottom of Parent Window

If you're seeing this, the parent window scrolled.

The question is: did the iframe content scroll first, or was it skipped?

Parent scroll: 0px