first commit
diff --git a/docs/scroll_issues/README.md b/docs/scroll_issues/README.md
new file mode 100644
index 0000000..bd6fc7f
--- /dev/null
+++ b/docs/scroll_issues/README.md
@@ -0,0 +1,108 @@
+# Flutter Web Scroll Event Handling Fixes
+
+This directory documents the fixes for three related GitHub issues dealing with scroll event handling in Flutter web applications.
+
+## Issues Overview
+
+| Issue | Problem | Key Fix |
+|-------|---------|---------|
+| [#156985](issue_156985.md) | Scroll events bubble to parent page when Flutter is in iframe | `preventDefault()` in iframe + explicit parent scroll via `postMessage` |
+| [#157435](issue_157435.md) | Touch scroll doesn't propagate to host page (embedded mode) | Don't `preventDefault()` on touch + platform channel for scroll propagation |
+| [#113196](issue_113196.md) | Mouse scroll blocked over cross-origin iframe in HtmlElementView | Transparent overlay captures wheel events and forwards to Flutter |
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ Host/Parent Page │
+│ ┌──────────────────────────────────────────────────────────┐ │
+│ │ Flutter Web App │ │
+│ │ ┌─────────────────────────────────────────────────────┐ │ │
+│ │ │ Flutter Scrollables │ │ │
+│ │ │ ┌───────────────────────────────────────────────┐ │ │ │
+│ │ │ │ HtmlElementView (cross-origin iframe) │ │ │ │
+│ │ │ │ + Wheel Overlay (Issue #113196) │ │ │ │
+│ │ │ └───────────────────────────────────────────────┘ │ │ │
+│ │ └─────────────────────────────────────────────────────┘ │ │
+│ │ │ │
+│ │ pointer_binding.dart: │ │
+│ │ - Detects iframe embedding (Issue #156985) │ │
+│ │ - preventDefault() to block native scroll chaining │ │
+│ │ - Explicit parent scroll via postMessage │ │
+│ │ - Touch event handling (Issue #157435) │ │
+│ └──────────────────────────────────────────────────────────┘ │
+│ │ │
+│ postMessage('flutter-scroll') │
+│ ▼ │
+│ window.addEventListener('message', scrollBy) │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Files Modified
+
+### Engine (`engine/src/flutter/lib/web_ui/lib/src/engine/`)
+
+| File | Changes |
+|------|---------|
+| `pointer_binding.dart` | Iframe detection, preventDefault in iframe, touch event handling, parent scroll |
+| `dom.dart` | `scrollParentWindow()` function, `parent` property on DomWindow |
+| `platform_dispatcher.dart` | `flutter/scroll` platform channel handler |
+| `platform_views/content_manager.dart` | Wheel overlay for HtmlElementView |
+| `view_embedder/embedding_strategy/*.dart` | `overscroll-behavior: contain` CSS |
+
+### Framework (`packages/flutter/lib/src/widgets/`)
+
+| File | Changes |
+|------|---------|
+| `scrollable.dart` | `respond(allowPlatformDefault: false)` when scroll handled |
+| `scroll_position_with_single_context.dart` | Touch scroll propagation via platform channel |
+
+## Demo Apps
+
+| Issue | Before | After |
+|-------|--------|-------|
+| #156985 | https://issue-156985-before.web.app | https://issue-156985-after.web.app |
+| #157435 | https://issue-157435-before.web.app | https://issue-157435-after.web.app |
+| #113196 | https://issue-113196-before.web.app | https://issue-113196-after.web.app |
+
+## Host Page Requirements
+
+For iframe embedding (Issue #156985), the host page must listen for scroll messages:
+
+```html
+<script>
+ window.addEventListener('message', function(event) {
+ if (event.data && event.data.type === 'flutter-scroll') {
+ window.scrollBy(event.data.deltaX, event.data.deltaY);
+ }
+ });
+</script>
+```
+
+## Testing
+
+```bash
+# Build engine with changes
+cd /Users/zhongliu/dev/flutter/engine/src/flutter/lib/web_ui
+felt build
+
+# Test demo app
+cd /Users/zhongliu/dev/flutter-apps/issue_156985_after
+flutter run -d chrome --local-web-sdk=wasm_release
+
+# Verify:
+# 1. Scroll inside Flutter - parent page should NOT scroll
+# 2. Scroll to boundary - parent page SHOULD scroll
+# 3. Nested scrollables - inner scrolls first, then outer, then parent
+```
+
+## Key Design Decisions
+
+1. **`postMessage` for cross-origin safety**: Using `postMessage` instead of direct `window.parent.scrollBy()` ensures the solution works for both same-origin and cross-origin iframes.
+
+2. **Two-flag system for nested scrollables**: The `_lastWheelEventAllowedDefault` and `_lastWheelEventHandledByWidget` flags work together to ensure correct behavior with nested scrollables.
+
+3. **Overlay for cross-origin iframes**: Since cross-origin iframes completely isolate events, an overlay is the only way to capture wheel events without breaking iframe functionality.
+
+4. **Don't block touch events**: Touch scrolling uses browser native behavior, so we don't `preventDefault()` on touch to allow smooth scrolling experience.
+
diff --git a/docs/scroll_issues/issue_113196.md b/docs/scroll_issues/issue_113196.md
new file mode 100644
index 0000000..0de39bc
--- /dev/null
+++ b/docs/scroll_issues/issue_113196.md
@@ -0,0 +1,155 @@
+# Issue #113196: Mouse Scroll Blocked Over HtmlElementView/Cross-Origin iframe
+
+## Problem Description
+
+When using `HtmlElementView` to embed a cross-origin iframe (e.g., YouTube video, Google Maps, third-party content) inside a Flutter web app, mouse wheel scrolling over the iframe is completely blocked. The user cannot scroll the Flutter page while hovering over the embedded iframe.
+
+### User Experience Impact
+- Users cannot scroll the page when mouse is over embedded content
+- Have to move mouse away from iframe to scroll
+- Makes pages with large embedded iframes very difficult to navigate
+
+### Difference from Other Issues
+- Issue #156985: Flutter IN an iframe, scroll bubbling UP to parent
+- Issue #157435: Touch scroll in embedded mode
+- Issue #113196: Scroll OVER a cross-origin iframe INSIDE Flutter
+
+## Root Cause Analysis
+
+1. **Cross-Origin Isolation**: Cross-origin iframes completely isolate all events due to browser security. Wheel events that occur inside the iframe never reach the parent Flutter page.
+
+2. **Browser Security Model**: When the mouse is over a cross-origin iframe, the browser sends wheel events to the iframe's document, not the parent. The parent document receives nothing.
+
+3. **No Event Forwarding**: Unlike same-origin iframes, cross-origin iframes cannot forward events to the parent due to the Same-Origin Policy.
+
+## Solution
+
+### Transparent Overlay Approach
+
+Add a transparent overlay element on top of the platform view that captures wheel events and forwards them to Flutter:
+
+### Engine Changes (`content_manager.dart`)
+
+```dart
+DomElement _safelyCreatePlatformViewSlot(int viewId, String viewType, String slotName) {
+ return _contents.putIfAbsent(viewId, () {
+ final DomElement wrapper = domDocument.createElement('flt-platform-view')
+ ..id = getPlatformViewDomId(viewId)
+ ..setAttribute('slot', slotName)
+ ..style.position = 'relative'
+ ..style.width = '100%'
+ ..style.height = '100%'
+ ..style.display = 'block';
+
+ // ... create content ...
+
+ // Add transparent overlay to capture wheel events
+ final DomElement wheelOverlay = domDocument.createElement('div')
+ ..style.position = 'absolute'
+ ..style.top = '0'
+ ..style.left = '0'
+ ..style.width = '100%'
+ ..style.height = '100%'
+ ..style.zIndex = '1000'
+ ..style.pointerEvents = 'auto';
+
+ _setupWheelEventForwarding(wheelOverlay, wrapper);
+ wrapper.append(wheelOverlay);
+
+ return wrapper;
+ });
+}
+```
+
+### Wheel Event Forwarding
+
+```dart
+void _setupWheelEventForwarding(DomElement overlay, DomElement wrapper) {
+ overlay.addEventListener(
+ 'wheel',
+ createDomEventListener((DomEvent event) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ // Find flutter-view element
+ DomElement? flutterView = wrapper.parentElement;
+ while (flutterView != null && flutterView.tagName != 'FLUTTER-VIEW') {
+ flutterView = flutterView.parentElement;
+ }
+
+ if (flutterView != null) {
+ // Create and dispatch new wheel event to flutter-view
+ final DomWheelEvent wheelEvent = event as DomWheelEvent;
+ final DomWheelEvent newEvent = createDomWheelEvent(
+ 'wheel',
+ <String, dynamic>{
+ 'bubbles': true,
+ 'cancelable': true,
+ 'clientX': wheelEvent.clientX,
+ 'clientY': wheelEvent.clientY,
+ 'deltaX': wheelEvent.deltaX,
+ 'deltaY': wheelEvent.deltaY,
+ 'deltaMode': wheelEvent.deltaMode,
+ 'buttons': wheelEvent.buttons,
+ },
+ );
+ flutterView.dispatchEvent(newEvent);
+ }
+ }),
+ <String, bool>{'capture': false, 'passive': false}.jsify()!,
+ );
+}
+```
+
+### Click-Through Handling
+
+For clicks and other pointer events, temporarily disable the overlay:
+
+```dart
+void _forwardPointerEventToContent(DomMouseEvent event, DomElement overlay) {
+ // Temporarily hide overlay to allow click-through
+ final String originalPointerEvents = overlay.style.pointerEvents;
+ overlay.style.pointerEvents = 'none';
+
+ // Use microtask to restore after browser dispatches event
+ Future<void>.microtask(() {
+ overlay.style.pointerEvents = originalPointerEvents;
+ });
+}
+```
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart` | Wheel overlay, event forwarding, click-through |
+
+## Trade-offs
+
+| Aspect | Impact |
+|--------|--------|
+| Wheel scrolling | ✅ Works - overlay captures and forwards to Flutter |
+| Click/tap on iframe | ✅ Works - overlay temporarily disables for clicks |
+| Iframe interactivity | ⚠️ Limited - complex interactions inside iframe may not work |
+| Keyboard input | ✅ Works - overlay doesn't capture keyboard events |
+
+## Demo
+
+- **Before Fix**: https://issue-113196-before.web.app
+- **After Fix**: https://issue-113196-after.web.app
+
+## Behavior After Fix
+
+1. ✅ Mouse wheel scrolling over cross-origin iframes scrolls the Flutter page
+2. ✅ Clicking on the iframe content still works (video play, map interaction)
+3. ✅ Flutter scrollables above/below the iframe work normally
+4. ⚠️ Some complex iframe interactions may require clicking first to "focus" the iframe
+
+## Alternative Approaches Considered
+
+1. **CSS `pointer-events: none` on iframe**: Would block all iframe interaction
+2. **iframe sandbox**: Would break iframe functionality
+3. **postMessage coordination**: Requires cooperation from iframe content (not possible for third-party)
+
+The overlay approach is the best balance of scroll functionality and iframe interactivity.
+
diff --git a/docs/scroll_issues/issue_156985.md b/docs/scroll_issues/issue_156985.md
new file mode 100644
index 0000000..9fb1a12
--- /dev/null
+++ b/docs/scroll_issues/issue_156985.md
@@ -0,0 +1,116 @@
+# Issue #156985: Scroll Events Bubble to Parent Page When Flutter is Embedded in iframe
+
+## Problem Description
+
+When a Flutter web app is embedded in an iframe, scroll events (mouse wheel) inside the Flutter app bubble up to the parent/host page, causing both the Flutter content and the parent page to scroll simultaneously.
+
+### User Experience Impact
+- Users scrolling through Flutter content also inadvertently scroll the parent page
+- Creates a jarring, confusing experience
+- Makes embedded Flutter apps feel broken compared to native iframe content
+
+### Reproduction Steps
+1. Embed a Flutter web app in an iframe on a scrollable HTML page
+2. Scroll inside the Flutter app using mouse wheel
+3. Observe that the parent page also scrolls
+
+## Root Cause Analysis
+
+The issue stems from how browsers handle scroll event propagation:
+
+1. **Native Browser Scroll Chaining**: By default, when an element inside an iframe reaches its scroll boundary, the browser propagates the scroll to the parent document ("scroll chaining")
+
+2. **Flutter's `allowPlatformDefault`**: Flutter uses `event.respond(allowPlatformDefault: true/false)` to control whether the browser should handle scroll events. When a scrollable is at its boundary, it sets `allowPlatformDefault: true`, which allows the browser's native scroll chaining to occur.
+
+3. **Nested Scrollables Problem**: With nested scrollables (e.g., ListView inside SingleChildScrollView), when the inner scrollable hits its boundary, it says "allow platform default". But the outer scrollable might still be able to scroll! The engine was using `|=` to combine responses, so once ANY widget said "allow", it would stay "allow".
+
+## Solution
+
+### Engine Changes (`pointer_binding.dart`)
+
+1. **Always `preventDefault()` in iframes**: When Flutter detects it's running inside an iframe, it always calls `preventDefault()` on wheel events to block native scroll chaining.
+
+2. **New flag `_lastWheelEventHandledByWidget`**: Tracks whether ANY widget explicitly handled the scroll event (responded with `allowPlatformDefault: false`).
+
+3. **Explicit parent scrolling via `postMessage`**: When ALL Flutter scrollables are at their boundaries (no widget handled the event), the engine explicitly scrolls the parent page using `window.parent.postMessage()`.
+
+4. **Iframe detection**: Added `_isEmbeddedInIframe()` method to detect if Flutter is running inside an iframe by checking if `window.parent !== window`.
+
+```dart
+// Key logic in _handleWheelEvent
+final bool isInIframe = _isEmbeddedInIframe();
+if (!_lastWheelEventAllowedDefault || isInIframe) {
+ event.preventDefault(); // Block native scroll chaining
+}
+
+// Only scroll parent when ALL scrollables are at boundary
+final bool shouldScrollParent = isInIframe &&
+ _lastWheelEventAllowedDefault &&
+ !_lastWheelEventHandledByWidget;
+if (shouldScrollParent) {
+ scrollParentWindow(wheelEvent.deltaX, wheelEvent.deltaY);
+}
+```
+
+### Framework Changes (`scrollable.dart`)
+
+Added explicit `respond(allowPlatformDefault: false)` when a scrollable successfully handles a scroll event:
+
+```dart
+void _handlePointerScroll(PointerEvent event) {
+ // ... scroll handling ...
+ if (delta != 0.0 && targetScrollOffset != position.pixels) {
+ position.pointerScroll(delta);
+ // Tell engine this scrollable handled the event
+ scrollEvent.respond(allowPlatformDefault: false);
+ }
+}
+```
+
+### Engine Changes (`dom.dart`)
+
+Added `scrollParentWindow()` function to scroll the parent page via `postMessage`:
+
+```dart
+void scrollParentWindow(double deltaX, double deltaY) {
+ final JSAny jsMessage = <String, dynamic>{
+ 'type': 'flutter-scroll',
+ 'deltaX': deltaX,
+ 'deltaY': deltaY,
+ }.jsify()!;
+ domWindow.parent._postMessage(jsMessage, '*');
+}
+```
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart` | Iframe detection, preventDefault in iframe, parent scroll via postMessage |
+| `engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart` | Added `scrollParentWindow()`, `parent` property on DomWindow |
+| `packages/flutter/lib/src/widgets/scrollable.dart` | Added `respond(allowPlatformDefault: false)` when scroll handled |
+
+## Host Page Requirements
+
+The host page must listen for `flutter-scroll` messages to receive scroll propagation:
+
+```javascript
+window.addEventListener('message', function(event) {
+ if (event.data && event.data.type === 'flutter-scroll') {
+ window.scrollBy(event.data.deltaX, event.data.deltaY);
+ }
+});
+```
+
+## Demo
+
+- **Before Fix**: https://issue-156985-before.web.app
+- **After Fix**: https://issue-156985-after.web.app
+
+## Behavior After Fix
+
+1. ✅ Scrolling inside Flutter iframe does NOT scroll parent page
+2. ✅ When Flutter content reaches boundary, parent page scrolls
+3. ✅ Nested scrollables work correctly - outer scrollable handles event before parent page
+4. ✅ Works with both same-origin and cross-origin iframes
+
diff --git a/docs/scroll_issues/issue_157435.md b/docs/scroll_issues/issue_157435.md
new file mode 100644
index 0000000..e3020cb
--- /dev/null
+++ b/docs/scroll_issues/issue_157435.md
@@ -0,0 +1,115 @@
+# Issue #157435: Touch Scroll Not Propagating to Host Page (Embedded Mode)
+
+## Problem Description
+
+When a Flutter web app is embedded in a host page using multi-view/custom element embedding (not iframe), touch scrolling inside the Flutter view does not propagate to the host page when the Flutter content reaches its scroll boundary.
+
+### User Experience Impact
+- On mobile devices, users cannot scroll the host page by swiping on the Flutter embedded view
+- Touch scrolling feels "stuck" at Flutter content boundaries
+- Poor mobile UX for embedded Flutter content
+
+### Difference from Issue #156985
+- Issue #156985 is about **mouse wheel** scrolling in **iframe** embedding
+- Issue #157435 is about **touch** scrolling in **custom element** embedding
+- Both require scroll propagation to parent, but through different mechanisms
+
+## Root Cause Analysis
+
+1. **`touch-action: none`**: Flutter sets `touch-action: none` on the host element to ensure Flutter receives all touch events for gesture recognition.
+
+2. **`preventDefault()` on pointerdown**: The engine was calling `preventDefault()` on ALL pointerdown events, which prevents the browser from initiating native touch scrolling.
+
+3. **No touch scroll propagation mechanism**: Unlike wheel events, there was no way for Flutter to propagate touch scroll deltas to the host page when at boundary.
+
+## Solution
+
+### Engine Changes (`pointer_binding.dart`)
+
+**Don't `preventDefault()` for touch events on pointerdown**:
+
+```dart
+// In pointerdown handler
+if (event.pointerType != 'touch') {
+ event.preventDefault();
+}
+// Touch events: let browser handle scroll initiation
+```
+
+This allows the browser's touch scrolling to work, while Flutter still handles touch events first via `touch-action: none`.
+
+### Framework Changes (`scroll_position_with_single_context.dart`)
+
+Added touch scroll propagation via platform channel:
+
+```dart
+static const BasicMessageChannel<Object?> _scrollChannel =
+ BasicMessageChannel<Object?>('flutter/scroll', JSONMessageCodec());
+
+@override
+void applyUserOffset(double delta) {
+ // Check if at boundary before applying scroll
+ final bool wasAtMin = pixels <= minScrollExtent;
+ final bool wasAtMax = pixels >= maxScrollExtent;
+
+ // Apply the scroll
+ setPixels(pixels - physics.applyPhysicsToUserOffset(this, delta));
+
+ // On web, propagate to parent when at boundary
+ if (kIsWeb) {
+ final bool shouldPropagateDown = delta < 0 && (wasAtMax || pixels >= maxScrollExtent);
+ final bool shouldPropagateUp = delta > 0 && (wasAtMin || pixels <= minScrollExtent);
+
+ if (shouldPropagateDown || shouldPropagateUp) {
+ _propagateOverscrollToParent(delta);
+ }
+ }
+}
+```
+
+### Engine Changes (`platform_dispatcher.dart`)
+
+Added handler for `flutter/scroll` platform channel:
+
+```dart
+case 'flutter/scroll':
+ final dynamic decoded = messageCodec.decodeMessage(data);
+ if (decoded is Map) {
+ final double deltaX = (decoded['deltaX'] as num?)?.toDouble() ?? 0.0;
+ final double deltaY = (decoded['deltaY'] as num?)?.toDouble() ?? 0.0;
+ scrollParentWindow(deltaX, deltaY);
+ replyToPlatformMessage(callback, messageCodec.encodeMessage(true));
+ }
+ return;
+```
+
+### CSS Changes (Embedding Strategies)
+
+Added `overscroll-behavior: contain` to prevent any residual scroll chaining:
+
+```dart
+// In custom_element_embedding_strategy.dart & full_page_embedding_strategy.dart
+setElementStyle(rootElement, 'overscroll-behavior', 'contain');
+```
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart` | Don't preventDefault on touch pointerdown |
+| `packages/flutter/lib/src/widgets/scroll_position_with_single_context.dart` | Touch scroll propagation via platform channel |
+| `engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart` | `flutter/scroll` channel handler |
+| `engine/src/flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/*.dart` | `overscroll-behavior: contain` CSS |
+
+## Demo
+
+- **Before Fix**: https://issue-157435-before.web.app
+- **After Fix**: https://issue-157435-after.web.app
+
+## Behavior After Fix
+
+1. ✅ Touch scrolling inside Flutter embedded view works normally
+2. ✅ When Flutter content is at boundary, continued swiping scrolls the host page
+3. ✅ Flutter gesture recognition still works (tap, drag, etc.)
+4. ✅ Works for both vertical and horizontal scrolling
+
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart
index ee028b1..15eb63b 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart
@@ -184,6 +184,17 @@
Future<DomImageBitmap> createImageBitmap(DomImageData source) {
return _createImageBitmap(source).toDart.then((JSAny? value) => value! as DomImageBitmap);
}
+
+ /// Scrolls the window by the given delta.
+ external void scrollBy(double x, double y);
+
+ /// Returns the parent window (for iframe scenarios).
+ /// Returns null if there is no parent or if same-origin policy blocks access.
+ external DomWindow? get parent;
+
+ /// Returns the current scroll position of the window.
+ external double get scrollX;
+ external double get scrollY;
}
typedef DomRequestAnimationFrameCallback = void Function(JSNumber highResTime);
@@ -208,6 +219,42 @@
@JS('window')
external DomWindow get domWindow;
+/// Scrolls the parent/host window by the given delta.
+///
+/// This is used for nested scrolling scenarios where Flutter is embedded
+/// in a host page (iframe or multi-view). When Flutter's scrollable is at
+/// its boundary, this function propagates the scroll to the parent window.
+///
+/// For iframe scenarios, it scrolls window.parent.
+/// For standalone/multi-view, it scrolls window directly.
+///
+/// This fixes GitHub issue #157435 (touch scroll not propagating to host page).
+void scrollParentWindow(double deltaX, double deltaY) {
+ try {
+ final DomWindow? parent = domWindow.parent;
+ // Always use postMessage for cross-origin safety.
+ // Check if parent exists - avoid comparing parent == domWindow as that
+ // triggers SecurityError on cross-origin iframes.
+ if (parent != null) {
+ // Use postMessage which works for both same-origin and cross-origin.
+ // The host page must listen for 'flutter-scroll' messages.
+ // Use jsify() to ensure proper conversion to JS object on all backends.
+ final JSAny jsMessage = <String, dynamic>{
+ 'type': 'flutter-scroll',
+ 'deltaX': deltaX,
+ 'deltaY': deltaY,
+ }.jsify()!;
+ parent._postMessage(jsMessage, '*');
+ } else {
+ // No parent - scroll this window directly
+ domWindow.scrollBy(deltaX, deltaY);
+ }
+ } catch (e) {
+ // Fallback: scroll current window if parent access fails
+ domWindow.scrollBy(deltaX, deltaY);
+ }
+}
+
@JS('Intl')
external DomIntl get domIntl;
@@ -478,6 +525,8 @@
external double scrollTop;
external double scrollLeft;
+ external double get scrollHeight;
+ external double get scrollWidth;
external DomTokenList get classList;
external String className;
@@ -1921,6 +1970,10 @@
@JS('changedTouches')
external _DomList get _changedTouches;
Iterable<DomTouch> get changedTouches => _createDomListWrapper<DomTouch>(_changedTouches);
+
+ @JS('touches')
+ external _DomList get _touches;
+ Iterable<DomTouch> get touches => _createDomListWrapper<DomTouch>(_touches);
}
@JS('Touch')
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart
index 09c1ec4..f2756d1 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart
@@ -643,6 +643,22 @@
// further effect after this point.
_defaultRouteName = '/';
return;
+
+ case 'flutter/scroll':
+ // Handle scroll propagation to parent/host window.
+ // This is used for nested scrolling when Flutter is embedded in a host page.
+ // Fixes GitHub issue #157435 (touch scroll not propagating to host page).
+ const JSONMessageCodec messageCodec = JSONMessageCodec();
+ final dynamic decoded = messageCodec.decodeMessage(data);
+ if (decoded is Map) {
+ final double deltaX = (decoded['deltaX'] as num?)?.toDouble() ?? 0.0;
+ final double deltaY = (decoded['deltaY'] as num?)?.toDouble() ?? 0.0;
+ scrollParentWindow(deltaX, deltaY);
+ replyToPlatformMessage(callback, messageCodec.encodeMessage(true));
+ } else {
+ replyToPlatformMessage(callback, messageCodec.encodeMessage(false));
+ }
+ return;
}
if (pluginMessageCallHandler != null) {
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
index d27c70c..39326b4 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
@@ -149,7 +149,20 @@
return _contents.putIfAbsent(viewId, () {
final DomElement wrapper = domDocument.createElement('flt-platform-view')
..id = getPlatformViewDomId(viewId)
- ..setAttribute('slot', slotName);
+ ..setAttribute('slot', slotName)
+ // Position relative so the wheel overlay can be positioned absolutely inside
+ // Width/height 100% to fill the slot's dimensions
+ ..style.position = 'relative'
+ ..style.width = '100%'
+ ..style.height = '100%'
+ ..style.display = 'block';
+
+ // Enable touch scrolling inside platform views.
+ // Flutter sets touch-action: none on the body to capture all touch events,
+ // but this prevents native touch scrolling inside platform views.
+ // We override it here to allow touch scrolling for HTML content.
+ // This fixes touch scrolling for Issue #113196 and #157435.
+ setElementStyle(wrapper, 'touch-action', 'pan-y pan-x');
final Function factoryFunction = _factories[viewType]!;
final DomElement content;
@@ -164,11 +177,265 @@
_ensureContentCorrectlySized(content, viewType);
wrapper.append(content);
+ // Add a transparent overlay to capture wheel events ONLY for cross-origin iframes.
+ // Cross-origin iframes (like YouTube embeds) completely isolate events - wheel
+ // events inside the iframe never reach the parent page due to browser security.
+ // This overlay sits on top and captures wheel events, forwarding them to Flutter.
+ // This fixes Issue #113196.
+ //
+ // For regular HTML elements (not iframes), we DON'T add the overlay because:
+ // 1. They can handle wheel events natively
+ // 2. They may have their own scrollable content
+ // 3. The overlay would block their native scrolling
+ if (_isCrossOriginIframe(content)) {
+ final DomElement wheelOverlay = domDocument.createElement('div')
+ ..style.position = 'absolute'
+ ..style.top = '0'
+ ..style.left = '0'
+ ..style.width = '100%'
+ ..style.height = '100%'
+ ..style.zIndex = '1000'
+ // Capture wheel events only, let clicks pass through
+ ..style.pointerEvents = 'auto';
+
+ _setupWheelEventForwarding(wheelOverlay, wrapper);
+ wrapper.append(wheelOverlay);
+ } else {
+ // For regular HTML elements, set up touch boundary detection.
+ // When the user scrolls to the boundary of the HTML element,
+ // we need to propagate the scroll to Flutter.
+ _setupTouchBoundaryDetection(content, wrapper);
+ }
+
wrapper.setAttribute(_ariaHiddenAttribute, 'true');
return wrapper;
});
}
+
+ /// Sets up wheel event forwarding from the overlay to Flutter's scroll handler.
+ /// Also forwards other pointer events to the content beneath the overlay.
+ void _setupWheelEventForwarding(DomElement overlay, DomElement wrapper) {
+ // Capture wheel events and forward to Flutter
+ overlay.addEventListener(
+ 'wheel',
+ createDomEventListener((DomEvent event) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ // Find the flutter-view element to dispatch the event
+ DomElement? flutterView = wrapper.parentElement;
+ while (flutterView != null && flutterView.tagName != 'FLUTTER-VIEW') {
+ flutterView = flutterView.parentElement;
+ }
+
+ if (flutterView != null) {
+ final DomWheelEvent wheelEvent = event as DomWheelEvent;
+ final DomWheelEvent newEvent = createDomWheelEvent(
+ 'wheel',
+ <String, dynamic>{
+ 'bubbles': true,
+ 'cancelable': true,
+ 'clientX': wheelEvent.clientX,
+ 'clientY': wheelEvent.clientY,
+ 'deltaX': wheelEvent.deltaX,
+ 'deltaY': wheelEvent.deltaY,
+ 'deltaMode': wheelEvent.deltaMode,
+ 'buttons': wheelEvent.buttons,
+ },
+ );
+ flutterView.dispatchEvent(newEvent);
+ }
+ }),
+ <String, bool>{'capture': false, 'passive': false}.jsify()!,
+ );
+
+ // For click events, temporarily hide the overlay and re-dispatch to element beneath
+ overlay.addEventListener(
+ 'click',
+ createDomEventListener((DomEvent event) {
+ _forwardPointerEventToContent(event as DomMouseEvent, overlay);
+ }),
+ );
+
+ // For mousedown, also forward to content
+ overlay.addEventListener(
+ 'mousedown',
+ createDomEventListener((DomEvent event) {
+ _forwardPointerEventToContent(event as DomMouseEvent, overlay);
+ }),
+ );
+
+ // For mouseup, also forward to content
+ overlay.addEventListener(
+ 'mouseup',
+ createDomEventListener((DomEvent event) {
+ _forwardPointerEventToContent(event as DomMouseEvent, overlay);
+ }),
+ );
+ }
+
+ /// Checks if the given element is a cross-origin iframe.
+ ///
+ /// Sets up touch boundary detection for regular HTML elements.
+ /// When the user scrolls to the boundary of the HTML element during touch scrolling,
+ /// we prevent the default to stop the HTML element from rubber-banding and let
+ /// Flutter handle the scroll.
+ void _setupTouchBoundaryDetection(DomElement content, DomElement wrapper) {
+ double? lastTouchY;
+ bool? browserOwnsScroll; // Once browser takes over (cancelable=false), it owns the gesture
+
+ content.addEventListener(
+ 'touchstart',
+ createDomEventListener((DomEvent event) {
+ final DomTouchEvent touchEvent = event as DomTouchEvent;
+ final Iterable<DomTouch> touches = touchEvent.touches;
+ if (touches.isNotEmpty) {
+ lastTouchY = touches.first.clientY;
+ browserOwnsScroll = null; // Reset on new touch
+
+ // Check if we're starting at a boundary
+ final DomElement scrollable = _findScrollableElement(content);
+ final double scrollTop = scrollable.scrollTop;
+ final double scrollHeight = scrollable.scrollHeight;
+ final double clientHeight = scrollable.clientHeight.toDouble();
+ final double maxScroll = scrollHeight - clientHeight;
+
+ final bool isAtBoundaryAtStart = scrollTop <= 1 || scrollTop >= maxScroll - 1;
+ print('[TOUCH] touchstart: y=${touches.first.clientY}, scrollTop=$scrollTop, maxScroll=$maxScroll, atBoundary=$isAtBoundaryAtStart');
+ }
+ }),
+ <String, bool>{'passive': true}.jsify()!,
+ );
+
+ content.addEventListener(
+ 'touchmove',
+ createDomEventListener((DomEvent event) {
+ final DomTouchEvent touchEvent = event as DomTouchEvent;
+ final Iterable<DomTouch> touches = touchEvent.touches;
+ if (touches.isEmpty || lastTouchY == null) {
+ return;
+ }
+
+ final double currentY = touches.first.clientY;
+ final double deltaY = lastTouchY! - currentY; // Positive = scrolling down
+ lastTouchY = currentY;
+
+ // Find the scrollable element (could be content itself or a child)
+ final DomElement scrollable = _findScrollableElement(content);
+
+ final double scrollTop = scrollable.scrollTop;
+ final double scrollHeight = scrollable.scrollHeight;
+ final double clientHeight = scrollable.clientHeight.toDouble();
+ final double maxScroll = scrollHeight - clientHeight;
+
+ // Check if at boundary in the direction of scroll
+ final bool atTop = scrollTop <= 1 && deltaY < 0; // Trying to scroll up at top
+ final bool atBottom = scrollTop >= maxScroll - 1 && deltaY > 0; // Trying to scroll down at bottom
+ final bool atBoundary = atTop || atBottom;
+
+ // Once browser takes over (first non-cancelable event), it owns this gesture
+ if (!event.cancelable) {
+ browserOwnsScroll = true;
+ }
+
+ print('[TOUCH] touchmove: deltaY=$deltaY, scrollTop=$scrollTop, maxScroll=$maxScroll, atTop=$atTop, atBottom=$atBottom, cancelable=${event.cancelable}, browserOwns=$browserOwnsScroll');
+
+ // Only prevent if:
+ // 1. Event is cancelable (we can still prevent it)
+ // 2. We're at a boundary in the scroll direction
+ // 3. Browser hasn't already taken over this gesture
+ if (event.cancelable && atBoundary && browserOwnsScroll != true) {
+ // At boundary and event is cancelable - prevent default to stop rubber-banding
+ // and let Flutter handle the scroll
+ print('[TOUCH] Preventing default - at boundary');
+ event.preventDefault();
+ }
+ }),
+ <String, bool>{'passive': false}.jsify()!,
+ );
+ }
+
+ /// Finds the scrollable element within a platform view content.
+ /// Returns the content itself if it's scrollable, or searches for a scrollable child.
+ DomElement _findScrollableElement(DomElement content) {
+ // Check if content itself is scrollable
+ if (_isScrollable(content)) {
+ return content;
+ }
+
+ // Search for a scrollable child
+ final Iterable<DomElement> children = content.querySelectorAll('*');
+ for (final DomElement child in children) {
+ if (_isScrollable(child)) {
+ return child;
+ }
+ }
+
+ // Default to content
+ return content;
+ }
+
+ /// Checks if an element is scrollable.
+ bool _isScrollable(DomElement element) {
+ final String overflowY = element.style.overflowY;
+ final String overflow = element.style.overflow;
+ final bool hasOverflow = overflowY == 'auto' || overflowY == 'scroll' ||
+ overflow == 'auto' || overflow == 'scroll';
+ final bool hasContent = element.scrollHeight > element.clientHeight;
+ return hasOverflow && hasContent;
+ }
+
+ /// Cross-origin iframes completely isolate events due to browser security,
+ /// so we need the wheel overlay to capture and forward wheel events.
+ /// Regular HTML elements and same-origin iframes don't need the overlay.
+ bool _isCrossOriginIframe(DomElement element) {
+ // Check if it's an iframe
+ if (element.tagName.toLowerCase() != 'iframe') {
+ return false;
+ }
+
+ // Check if it has a src attribute that indicates cross-origin
+ final String? src = element.getAttribute('src');
+ if (src == null || src.isEmpty) {
+ return false;
+ }
+
+ // Try to determine if it's cross-origin
+ try {
+ final Uri srcUri = Uri.parse(src);
+ final Uri currentUri = Uri.parse(domWindow.location.href);
+
+ // If the iframe src has a different origin (protocol + host + port), it's cross-origin
+ if (srcUri.hasScheme && srcUri.host.isNotEmpty) {
+ final bool isCrossOrigin = srcUri.origin != currentUri.origin;
+ return isCrossOrigin;
+ }
+
+ // Relative URLs are same-origin
+ return false;
+ } catch (_) {
+ // If we can't parse the URL, assume it might be cross-origin to be safe
+ return true;
+ }
+ }
+
+ /// Forwards a pointer event to the element beneath the overlay.
+ ///
+ /// Note: For cross-origin iframes, we can't actually dispatch events to the
+ /// content. This method temporarily sets pointer-events to 'none' to allow
+ /// the browser to naturally handle click-through.
+ void _forwardPointerEventToContent(DomMouseEvent event, DomElement overlay) {
+ // Temporarily hide the overlay to allow click-through
+ final String originalPointerEvents = overlay.style.pointerEvents;
+ overlay.style.pointerEvents = 'none';
+
+ // Use a microtask to restore pointer-events after the browser has had
+ // a chance to dispatch the event to the element beneath.
+ Future<void>.microtask(() {
+ overlay.style.pointerEvents = originalPointerEvents;
+ });
+ }
/// Removes a PlatformView by its `viewId` from the manager, and from the DOM.
///
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart
index 0b3d784..a28f3f2 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart
@@ -546,6 +546,17 @@
DomWheelEvent? _lastWheelEvent;
bool _lastWheelEventWasTrackpad = false;
bool _lastWheelEventAllowedDefault = false;
+
+ // Tracking for HTML platform view scroll stuck detection
+ double? _lastHtmlScrollTop;
+ int _lastHtmlScrollDirection = 0; // 1 = down, -1 = up, 0 = none
+ int _consecutiveUnchangedScrollCount = 0;
+ /// Tracks whether a widget explicitly handled the wheel event.
+ /// This is set to true when respond(allowPlatformDefault: false) is called.
+ /// Used to prevent parent page scrolling when a nested scrollable handles
+ /// the event, even if an outer scrollable at boundary says allowPlatformDefault: true.
+ /// (GitHub Issue #156985 - nested scrollables case)
+ bool _lastWheelEventHandledByWidget = false;
DomElement get _viewTarget => _view.dom.rootElement;
DomEventTarget get _globalTarget => _view.embeddingStrategy.globalEventTarget;
@@ -747,8 +758,18 @@
scrollDeltaX: deltaX,
scrollDeltaY: deltaY,
onRespond: ({bool allowPlatformDefault = false}) {
- // Once `allowPlatformDefault` is `true`, never go back to `false`!
- _lastWheelEventAllowedDefault |= allowPlatformDefault;
+ // Track both: whether any widget allows default, and whether any widget
+ // explicitly handled the event.
+ // GitHub Issue #156985: With nested scrollables, an inner scrollable may
+ // handle the scroll (respond false) while an outer scrollable at boundary
+ // allows platform default (respond true). The handler takes precedence.
+ if (allowPlatformDefault) {
+ _lastWheelEventAllowedDefault = true;
+ } else {
+ // A widget explicitly handled this event - take precedence over any
+ // "allow platform default" responses from other widgets.
+ _lastWheelEventHandledByWidget = true;
+ }
},
);
}
@@ -772,19 +793,251 @@
}
assert(event.isA<DomWheelEvent>());
+ final DomWheelEvent wheelEvent = event as DomWheelEvent;
if (_debugLogPointerEvents) {
print(event.type);
}
+
+ // Check if the event target is inside a platform view with regular HTML content
+ // (not a cross-origin iframe). If so, check if the HTML element can scroll.
+ final _HtmlScrollableInfo? htmlScrollInfo = _getHtmlScrollableInfo(event);
+ if (htmlScrollInfo != null) {
+ final double currentScrollTop = htmlScrollInfo.scrollableElement.scrollTop;
+ final int currentDirection = wheelEvent.deltaY > 0 ? 1 : (wheelEvent.deltaY < 0 ? -1 : 0);
+
+ print('[HTML_SCROLL] Event over HTML, deltaY=${wheelEvent.deltaY}, scrollTop=$currentScrollTop, lastDir=$_lastHtmlScrollDirection, curDir=$currentDirection');
+
+ // We're over a regular HTML element in a platform view.
+ // Check if it can scroll in the direction of the wheel event.
+ final bool canScrollInDirection = _canHtmlElementScroll(
+ htmlScrollInfo.scrollableElement,
+ wheelEvent.deltaX,
+ wheelEvent.deltaY,
+ );
+
+ print('[HTML_SCROLL] canScrollInDirection=$canScrollInDirection');
+
+ if (canScrollInDirection) {
+ // The HTML element can scroll in this direction.
+ // We need to programmatically scroll the HTML element because Flutter's
+ // event listener captures wheel events at the glass pane level, preventing
+ // them from naturally propagating to the HTML element.
+ final DomElement scrollable = htmlScrollInfo.scrollableElement;
+ scrollable.scrollTop = scrollable.scrollTop + wheelEvent.deltaY;
+
+ final double newScrollTop = scrollable.scrollTop;
+ print('[HTML_SCROLL] Programmatically scrolled HTML: $currentScrollTop -> $newScrollTop');
+
+ // Update tracking
+ _consecutiveUnchangedScrollCount = 0;
+ _lastHtmlScrollTop = newScrollTop;
+ _lastHtmlScrollDirection = currentDirection;
+
+ // Prevent default and stop - we handled the scroll
+ event.preventDefault();
+ return;
+ } else {
+ // At boundary - let Flutter handle it
+ print('[HTML_SCROLL] HTML at boundary, dispatching to Flutter');
+ _consecutiveUnchangedScrollCount = 0;
+ _lastHtmlScrollTop = currentScrollTop;
+ _lastHtmlScrollDirection = currentDirection;
+ // Fall through to Flutter handling
+ }
+ } else {
+ // Not over HTML platform view - DON'T reset direction tracking immediately.
+ // The HTML element might briefly move out of view during scrolling,
+ // and we need to preserve the direction to properly handle the transition
+ // when the user scrolls back into the HTML element.
+ // Only reset the stuck counter and scrollTop.
+ _consecutiveUnchangedScrollCount = 0;
+ _lastHtmlScrollTop = null;
+ // Keep _lastHtmlScrollDirection unchanged to handle direction transitions
+ }
+
+ // Reset flags before dispatching to framework
_lastWheelEventAllowedDefault = false;
- // [ui.PointerData] can set the `_lastWheelEventAllowedDefault` variable
- // to true, when the framework says so. See the implementation of `respond`
- // when creating the PointerData object above.
- _callback(event, _convertWheelEventToPointerData(event as DomWheelEvent));
+ _lastWheelEventHandledByWidget = false;
+ // [ui.PointerData] can set these flags via the `respond` callback.
+ // See the implementation of `onRespond` when creating the PointerData above.
+ _callback(event, _convertWheelEventToPointerData(wheelEvent));
// This works because the `_callback` is handled synchronously in the
- // framework, so it's able to modify `_lastWheelEventAllowedDefault`.
- if (!_lastWheelEventAllowedDefault) {
+ // framework, so it's able to modify the flags.
+ //
+ // GitHub Issue #156985: When Flutter is embedded in an iframe, ALWAYS call
+ // preventDefault() to prevent scroll events from bubbling to the parent page.
+ // Without this, scroll chaining causes the parent page to scroll when the
+ // Flutter content is at its scroll boundary.
+ //
+ // We detect iframe embedding by checking if window.parent !== window.
+ // If we want to explicitly scroll the parent (Issue #157435), we do that
+ // via postMessage, not by allowing platform default.
+ final bool isInIframe = _isEmbeddedInIframe();
+ if (!_lastWheelEventAllowedDefault || isInIframe) {
event.preventDefault();
}
+
+ // GitHub Issue #156985 + #157435: When Flutter is at boundary in an iframe,
+ // we've prevented the native scroll chaining above, but we still want to
+ // scroll the parent page. Do this explicitly via postMessage.
+ //
+ // IMPORTANT: Only scroll parent if:
+ // 1. We're in an iframe
+ // 2. Some widget wants to allow platform default (at boundary)
+ // 3. NO widget explicitly handled the event (nested scrollables case)
+ final bool shouldScrollParent = isInIframe &&
+ _lastWheelEventAllowedDefault &&
+ !_lastWheelEventHandledByWidget;
+ if (shouldScrollParent) {
+ // All Flutter scrollables are at boundary - scroll the parent.
+ scrollParentWindow(wheelEvent.deltaX, wheelEvent.deltaY);
+ }
+ }
+
+ /// Information about a scrollable HTML element inside a platform view.
+ _HtmlScrollableInfo? _getHtmlScrollableInfo(DomEvent event) {
+ DomElement? target = event.target as DomElement?;
+ if (target == null) {
+ return null;
+ }
+
+ // Walk up the DOM tree to find the scrollable element and platform view
+ DomElement? scrollableElement;
+ DomElement? current = target;
+
+ while (current != null) {
+ final String tagName = current.tagName.toLowerCase();
+
+ // Check if this element is scrollable
+ if (scrollableElement == null) {
+ final String overflow = current.style.overflow;
+ final String overflowY = current.style.overflowY;
+ if (overflow == 'auto' || overflow == 'scroll' ||
+ overflowY == 'auto' || overflowY == 'scroll') {
+ scrollableElement = current;
+ }
+ }
+
+ // Check if we've reached the flt-platform-view wrapper
+ if (tagName == 'flt-platform-view') {
+ // Found a platform view - check if its first child is a cross-origin iframe
+ final DomElement? content = current.firstElementChild;
+ if (content == null) {
+ return null;
+ }
+
+ // If the content is an iframe, we have the wheel overlay handling it
+ if (content.tagName.toLowerCase() == 'iframe') {
+ return null;
+ }
+
+ // It's a regular HTML element - return the scrollable info
+ // Use the scrollable element we found, or the content itself
+ return _HtmlScrollableInfo(
+ scrollableElement: scrollableElement ?? content,
+ );
+ }
+
+ // Stop searching if we've exited the flutter-view
+ if (tagName == 'flutter-view') {
+ break;
+ }
+
+ current = current.parentElement;
+ }
+
+ return null;
+ }
+
+ /// Checks if an HTML element can scroll in the given direction.
+ /// Returns true if the element can handle the scroll, false if it's at boundary.
+ bool _canHtmlElementScroll(DomElement element, num deltaX, num deltaY) {
+ final double scrollTop = element.scrollTop;
+ final double scrollLeft = element.scrollLeft;
+ final double scrollHeight = element.scrollHeight;
+ final double scrollWidth = element.scrollWidth;
+ final double clientHeight = element.clientHeight;
+ final double clientWidth = element.clientWidth;
+
+ // Check if the element is actually scrollable (has overflow content)
+ final bool hasVerticalOverflow = scrollHeight > clientHeight + 1;
+ final bool hasHorizontalOverflow = scrollWidth > clientWidth + 1;
+
+ print('[HTML_SCROLL] scrollTop=$scrollTop, scrollHeight=$scrollHeight, clientHeight=$clientHeight, deltaY=$deltaY');
+ print('[HTML_SCROLL] hasVerticalOverflow=$hasVerticalOverflow, hasHorizontalOverflow=$hasHorizontalOverflow');
+
+ // Check vertical scrolling
+ if (deltaY != 0 && hasVerticalOverflow) {
+ if (deltaY > 0) {
+ // Scrolling down - can scroll if not at bottom
+ final bool canScrollDown = scrollTop + clientHeight < scrollHeight - 1;
+ print('[HTML_SCROLL] Scrolling DOWN, canScrollDown=$canScrollDown');
+ if (canScrollDown) {
+ return true;
+ }
+ } else {
+ // Scrolling up - can scroll if not at top
+ final bool canScrollUp = scrollTop > 1;
+ print('[HTML_SCROLL] Scrolling UP, canScrollUp=$canScrollUp');
+ if (canScrollUp) {
+ return true;
+ }
+ }
+ }
+
+ // Check horizontal scrolling
+ if (deltaX != 0 && hasHorizontalOverflow) {
+ if (deltaX > 0) {
+ // Scrolling right - can scroll if not at right edge
+ if (scrollLeft + clientWidth < scrollWidth - 1) {
+ return true;
+ }
+ } else {
+ // Scrolling left - can scroll if not at left edge
+ if (scrollLeft > 1) {
+ return true;
+ }
+ }
+ }
+
+ print('[HTML_SCROLL] At boundary, letting Flutter handle');
+ // Element is at boundary in the scroll direction
+ return false;
+ }
+
+ /// Returns true if Flutter is embedded inside an iframe.
+ ///
+ /// This is detected by checking if window.parent is different from window.
+ /// Used to determine whether to always preventDefault on wheel events to
+ /// prevent scroll chaining to the parent page (GitHub Issue #156985).
+ static bool? _cachedIsInIframe;
+ bool _isEmbeddedInIframe() {
+ // Cache the result since this check is called for every wheel event
+ if (_cachedIsInIframe != null) {
+ return _cachedIsInIframe!;
+ }
+
+ try {
+ // If window.parent is the same object as window, we're not in an iframe.
+ // If they're different, we're in an iframe.
+ // Note: Accessing window.parent properties may throw in cross-origin scenarios,
+ // so we wrap in try-catch. If it throws, we assume we're in a cross-origin
+ // iframe and should prevent default.
+ final DomWindow? parent = domWindow.parent;
+ if (parent == null) {
+ _cachedIsInIframe = false;
+ return false;
+ }
+ // Use Dart's identical() to check if parent and window are the same object.
+ // In a top-level window, window.parent === window.
+ // In an iframe, window.parent is the parent window (different object).
+ _cachedIsInIframe = !identical(parent, domWindow);
+ return _cachedIsInIframe!;
+ } catch (e) {
+ // Cross-origin iframe - assume we're embedded and should prevent default
+ _cachedIsInIframe = true;
+ return true;
+ }
}
/// For browsers that report delta line instead of pixels such as FireFox
@@ -820,6 +1073,17 @@
String toString() => '$runtimeType(change: $change, buttons: $buttons)';
}
+/// Information about a scrollable HTML element inside a platform view.
+/// Used to determine if wheel events should be handled by the HTML element
+/// or passed to Flutter.
+@immutable
+class _HtmlScrollableInfo {
+ const _HtmlScrollableInfo({required this.scrollableElement});
+
+ /// The scrollable HTML element (has overflow: auto/scroll).
+ final DomElement scrollableElement;
+}
+
class _ButtonSanitizer {
int _pressedButtons = 0;
@@ -1003,7 +1267,16 @@
// rendered the next input element, leading to the focus incorrectly returning to
// the main Flutter view instead.
// A zero-length timer is sufficient in all tested browsers to achieve this.
- event.preventDefault();
+ //
+ // IMPORTANT: For touch events, we DON'T call preventDefault() to allow browser
+ // scrolling to work. This fixes GitHub issues:
+ // - #157435: Flutter Web embed mode not scrolling the hosting page (touch)
+ // - #156985: Scroll events bubble to parent page (touch component)
+ // The trade-off is that focus transitions on touch might be slightly less smooth,
+ // but browser scrolling is more important for mobile UX.
+ if (event.pointerType != 'touch') {
+ event.preventDefault();
+ }
Timer(Duration.zero, () {
EnginePlatformDispatcher.instance.requestViewFocusChange(
viewId: _view.viewId,
@@ -1028,6 +1301,36 @@
// TODO(dkwingsmt): Investigate whether we can configure the behavior for
// `_viewTarget`. https://github.com/flutter/flutter/issues/157968
_addPointerEventListener(_globalTarget, 'pointermove', (DomPointerEvent moveEvent) {
+ // For touch events over a regular HTML platform view that can scroll,
+ // check if we should skip dispatching to Flutter.
+ if (moveEvent.pointerType == 'touch') {
+ final _HtmlScrollableInfo? htmlScrollInfo = _getHtmlScrollableInfo(moveEvent);
+ if (htmlScrollInfo != null) {
+ // We're over a regular HTML element in a platform view.
+ // Check if the HTML element can scroll in the direction of the touch.
+ final DomElement scrollable = htmlScrollInfo.scrollableElement;
+ final double scrollTop = scrollable.scrollTop;
+ final double scrollHeight = scrollable.scrollHeight;
+ final double clientHeight = scrollable.clientHeight.toDouble();
+ final double maxScroll = scrollHeight - clientHeight;
+
+ // Check if at boundary
+ final bool atTop = scrollTop <= 1;
+ final bool atBottom = scrollTop >= maxScroll - 1;
+
+ print('[TOUCH_POINTER] scrollTop=$scrollTop, maxScroll=$maxScroll, atTop=$atTop, atBottom=$atBottom');
+
+ if (!atTop && !atBottom) {
+ // HTML element is not at a boundary - let browser handle it
+ print('[TOUCH_POINTER] Skipping - HTML can scroll');
+ return;
+ }
+
+ // At a boundary - dispatch to Flutter so it can scroll the parent page
+ print('[TOUCH_POINTER] At boundary - dispatching to Flutter');
+ }
+ }
+
final int device = _getPointerId(moveEvent);
final _ButtonSanitizer sanitizer = _ensureSanitizer(device);
final List<ui.PointerData> pointerData = <ui.PointerData>[];
diff --git a/packages/flutter/lib/src/widgets/scroll_position_with_single_context.dart b/packages/flutter/lib/src/widgets/scroll_position_with_single_context.dart
index ac90ab8..22ff639 100644
--- a/packages/flutter/lib/src/widgets/scroll_position_with_single_context.dart
+++ b/packages/flutter/lib/src/widgets/scroll_position_with_single_context.dart
@@ -11,9 +11,11 @@
import 'dart:math' as math;
+import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/physics.dart';
import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
import 'basic.dart';
import 'framework.dart';
@@ -125,10 +127,67 @@
}
}
+ /// Platform channel for scroll propagation to parent/host window on web.
+ /// Used for nested scrolling when Flutter is embedded in a host page.
+ /// Fixes GitHub issue #157435 (touch scroll not propagating to host page).
+ static const BasicMessageChannel<Object?> _scrollChannel = BasicMessageChannel<Object?>(
+ 'flutter/scroll',
+ JSONMessageCodec(),
+ );
+
@override
void applyUserOffset(double delta) {
updateUserScrollDirection(delta > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse);
- setPixels(pixels - physics.applyPhysicsToUserOffset(this, delta));
+
+ // Check if we're at boundary BEFORE applying the scroll
+ final bool wasAtMin = pixels <= minScrollExtent;
+ final bool wasAtMax = pixels >= maxScrollExtent;
+
+ final double physicsOffset = physics.applyPhysicsToUserOffset(this, delta);
+ final double targetPixels = pixels - physicsOffset;
+ setPixels(targetPixels);
+
+ // On web, propagate scroll to parent when at boundary.
+ // Note: With BouncingScrollPhysics, overscroll is always 0 (allows rubber-band).
+ // So we check if we WERE at boundary and user is trying to scroll further.
+ if (kIsWeb) {
+ // Scrolling down (negative delta = finger moving up = content moving up = scroll down)
+ // User wants to scroll down but we're at or past max
+ final bool shouldPropagateDown = delta < 0 && (wasAtMax || pixels >= maxScrollExtent);
+ // Scrolling up (positive delta = finger moving down = content moving down = scroll up)
+ // User wants to scroll up but we're at or past min
+ final bool shouldPropagateUp = delta > 0 && (wasAtMin || pixels <= minScrollExtent);
+
+ if (shouldPropagateDown || shouldPropagateUp) {
+ // Use the full delta for smooth scrolling, not the physics-reduced amount.
+ // physicsOffset is reduced for rubber-banding which makes propagation jerky.
+ _propagateOverscrollToParent(delta);
+ }
+ }
+ }
+
+ /// Sends overscroll delta to the engine to scroll the parent/host window.
+ void _propagateOverscrollToParent(double overscroll) {
+ // Convert overscroll to x/y delta based on axis direction.
+ // Note: overscroll is positive when scrolling past max, negative past min.
+ double deltaX = 0.0;
+ double deltaY = 0.0;
+ switch (axisDirection) {
+ case AxisDirection.up:
+ deltaY = overscroll;
+ case AxisDirection.down:
+ deltaY = -overscroll;
+ case AxisDirection.left:
+ deltaX = overscroll;
+ case AxisDirection.right:
+ deltaX = -overscroll;
+ }
+
+ // Send to engine via platform channel (fire-and-forget, no await needed)
+ _scrollChannel.send(<String, dynamic>{
+ 'deltaX': deltaX,
+ 'deltaY': deltaY,
+ });
}
@override
diff --git a/packages/flutter/lib/src/widgets/scrollable.dart b/packages/flutter/lib/src/widgets/scrollable.dart
index cf71c2f..8ad91cc 100644
--- a/packages/flutter/lib/src/widgets/scrollable.dart
+++ b/packages/flutter/lib/src/widgets/scrollable.dart
@@ -967,6 +967,15 @@
}
// The `event` won't result in a scroll, so allow the platform to trigger
// any default native actions.
+ //
+ // This is the key fix for GitHub issues:
+ // - #156985: Scroll events bubble to parent page when at boundaries
+ // - #113196: Mouse scroll blocked over HtmlElementView iframe
+ //
+ // When the scrollable is at its boundary (can't scroll further in the
+ // direction of the event), we let the browser handle the event. This
+ // enables proper nested scrolling behavior and allows scroll events
+ // to pass through to parent scrollables or the browser.
event.respond(allowPlatformDefault: true);
} else if (event is PointerScrollInertiaCancelEvent) {
position.pointerScroll(0);
@@ -976,10 +985,17 @@
void _handlePointerScroll(PointerEvent event) {
assert(event is PointerScrollEvent);
- final double delta = _pointerSignalEventDelta(event as PointerScrollEvent);
+ final PointerScrollEvent scrollEvent = event as PointerScrollEvent;
+ final double delta = _pointerSignalEventDelta(scrollEvent);
final double targetScrollOffset = _targetScrollOffsetForPointerScroll(delta);
if (delta != 0.0 && targetScrollOffset != position.pixels) {
position.pointerScroll(delta);
+ // GitHub Issue #156985: When THIS scrollable successfully handles the scroll,
+ // we must call respond(allowPlatformDefault: false) to override any previous
+ // respond(allowPlatformDefault: true) calls from NESTED scrollables that are
+ // at their boundaries. Without this, the engine would scroll the parent page
+ // even though we just handled the scroll.
+ scrollEvent.respond(allowPlatformDefault: false);
}
}
