Demonstrating scroll event bubbling from iframe to parent page
When you scroll inside the Flutter app below (the red-bordered iframe), BOTH the Flutter app AND this parent page will scroll together. Watch the scroll indicator in the top-right corner!
GitHub Issue: #156985
Problem: When a Flutter web app is embedded in an iframe with a fixed position,
and contains a ListView inside a SingleChildScrollView,
scroll events bubble up to the parent page, causing both to scroll simultaneously.
Root Cause: Without browserScrolling: true, Flutter intercepts
wheel and touch events. Inside an iframe, these events aren't properly contained,
so they propagate back to the parent document.
Solution: Add browserScrolling: true to the
SingleChildScrollView and wrap nested scrollables with BrowserScrollZone
for boundary detection.
The Flutter app below is embedded in a fixed-position iframe. Try scrolling inside it and watch what happens to this parent page!
This is content on the parent page. Notice that when you scroll inside the Flutter app above, this parent page content also scrolls.
The scroll indicator in the top-right corner shows the parent page's scroll position. It should NOT change when scrolling inside the Flutter iframe, but in this broken state, it does!
This section exists to provide scrollable content on the parent page, making it easier to observe the scroll bubbling behavior.
In the fixed version (with browserScrolling: true),
scrolling inside the Flutter iframe would NOT affect this parent page.
The issue is particularly problematic for:
The fix involves two key changes:
browserScrolling: true to SingleChildScrollViewBrowserScrollZone for boundary detectionThis allows the browser to handle scrolling natively while still supporting Flutter's custom scroll physics and nested scrolling.