Skip to content

[web, wasm, platform view] Widgets do not always render on top of platform view when compiled to WASM #152139

New issue
New issue
Closed
flutter/engine
#54061
Closed
[web, wasm, platform view] Widgets do not always render on top of platform view when compiled to WASM#152139
flutter/engine
#54061
Labels
a: platform-viewsEmbedding Android/iOS views in Flutter appse: wasmIssues related to the wasm build of Flutter Web.engineflutter/engine related. See also e: labels.found in release: 3.22Found to occur in 3.22found in release: 3.24Found to occur in 3.24has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform team
@Rexios80

Description

@Rexios80
Rexios80
opened on Jul 22, 2024

Steps to reproduce

  1. Be on flutter master (platform views were broken on WASM prior to [skwasm] Fix platform view placement. engine#53845)
  2. Checkout https://github.com/Rexios80/pointer_interceptor_wasm_test
  3. flutter pub get
  4. flutter run -d chrome --web-port 7357
  5. See the button and debug banner rendered in top right corner
  6. flutter run -d chrome --wasm --web-port 7357
  7. See the button and debug banner missing in top right corner

Expected results

Button is rendered with both Skia and WASM renderers

Actual results

Button is not rendered with WASM renderer. The click action still works though.

Strangely, the button does render if it is placed in the top left corner

Code sample

https://github.com/Rexios80/pointer_interceptor_wasm_test

Screenshots or Video

No response

Logs

Output from Chrome dev tools. Not sure there's anything relevant. Yes I know there's an API key in there it's the one from the packages repo.

Logs 
js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:236 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading
lca @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:236
google.maps.Load @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:14
(anonymous) @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:438
(anonymous) @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:438
flutter_bootstrap.js:3 Exception while loading service worker: Error: prepareServiceWorker took more than 4000ms to resolve. Moving on.
    at flutter_bootstrap.js:1:2968
(anonymous) @ flutter_bootstrap.js:3
Promise.catch (async)
load @ flutter_bootstrap.js:3
(anonymous) @ flutter_bootstrap.js:12
maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i22940&2i14232&2e1&3u7&4m2&1u1137&2u1085&5m5&1e0&5sen-US&6sus&10b1&12b1&key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk&token=80242:1 
        
        
       GET https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i22940&2i14232&2e1&3u7&4m2&1u1137&2u1085&5m5&1e0&5sen-US&6sus&10b1&12b1&key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk&token=80242 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK)
Image (async)
zba @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:208
(anonymous) @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:389
_.G.uA @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:378
setTimeout (async)
_.qg @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:116
_.G.start @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:378
_.yn @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:194
changed @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:390
Qk @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:160
_.Ok.bindTo @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:284
MC.Fg @ map.js:130
(anonymous) @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:222
Promise.then (async)
Ro @ js?key=AIzaSyAa9cRBkhuxGq3Xw3HPz8SPwaVOhRmm7kk:221
_1583 @ main.dart.mjs:400
$GoogleMapController._createMap @ main.dart.wasm:0x1f0307
$GoogleMapController.init @ google_maps_controller.dart:210
$GoogleMapsPlugin.buildViewWithConfiguration @ google_maps_flutter_web.dart:329
$_GoogleMapState.build @ google_map.dart:335
$StatefulElement.build @ framework.dart:5729
$ComponentElement.performRebuild @ framework.dart:5617
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$MultiChildRenderObjectElement.inflateWidget @ framework.dart:7035
$MultiChildRenderObjectElement.mount @ framework.dart:7047
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$MultiChildRenderObjectElement.inflateWidget @ framework.dart:7035
$MultiChildRenderObjectElement.mount @ framework.dart:7047
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$MultiChildRenderObjectElement.inflateWidget @ framework.dart:7035
$MultiChildRenderObjectElement.mount @ framework.dart:7047
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
$ComponentElement._firstBuild @ framework.dart:5599
$StatefulElement._firstBuild @ framework.dart:5771
$ComponentElement.mount @ framework.dart:5593
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$SingleChildRenderObjectElement.mount @ framework.dart:6900
$Element.inflateWidget @ framework.dart:4468
$Element.updateChild @ framework.dart:3963
$ComponentElement.performRebuild @ framework.dart:5642
$StatefulElement.performRebuild @ framework.dart:5780
$Element.rebuild @ framework.dart:5333
setTimeout (async)
_1807 @ main.dart.mjs:504
$_JSEventLoop._setTimeout @ main.dart.wasm:0x10c80f
$_OneShotTimer._schedule @ timer_patch.dart:89
$new _Timer (constructor body) @ timer_patch.dart:76
$new _OneShotTimer (constructor body) @ timer_patch.dart:85
$_OneShotTimer @ timer_patch.dart:85
$Timer._createTimer @ timer_patch.dart:51
$_RootZone.createTimer @ zone.dart:1685
$new Timer @ timer.dart:46
$Timer.run @ timer.dart:105
$_WidgetsFlutterBinding&BindingBase&GestureBinding&SchedulerBinding&ServicesBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.scheduleAttachRootWidget @ binding.dart:1232
$_runWidget @ binding.dart:1465
$runApp @ binding.dart:1399
$main @ main.dart:5
$main tear-off trampoline @ main.dart.wasm:0xf7e47
$main closure at file:///Users/rexios/repos/pointer_interceptor_wasm_test/.dart_tool/flutter_build/472f4d0a55257d2dc35a456401fde92c/main.dart:20:13 @ main.dart:24
$closure wrapper at file:///Users/rexios/repos/pointer_interceptor_wasm_test/.dart_tool/flutter_build/472f4d0a55257d2dc35a456401fde92c/main.dart:20:13 trampoline @ main.dart.wasm:0xf7c4a
$bootstrapEngine closure at org-dartlang-sdk:///lib/ui_web/ui_web/initialization.dart:35:16 inner @ initialization.dart:41
$_awaitHelper closure at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:83:16 @ async_patch.dart:84
$closure wrapper at org-dartlang-sdk:///dart-sdk/lib/_internal/wasm/lib/async_patch.dart:83:16 trampoline @ main.dart.wasm:0x245a23
$_RootZone.runUnary @ zone.dart:1661
$_FutureListener.handleValue @ future_impl.dart:163
$_Future._propagateToListeners closure handleValueCallback at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:859:33 @ future_impl.dart:861
$_Future._propagateToListeners @ future_impl.dart:890
$_Future._completeWithValue @ future_impl.dart:666
$_Future._asyncCompleteWithValue closure at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:735:29 @ future_impl.dart:736
$closure wrapper at org-dartlang-sdk:///dart-sdk/lib/async/future_impl.dart:735:29 trampoline @ main.dart.wasm:0xefed3
$_microtaskLoop @ schedule_microtask.dart:40
$_startMicrotaskLoop @ schedule_microtask.dart:49
$_startMicrotaskLoop tear-off trampoline @ main.dart.wasm:0xf167b
$_invokeCallback @ internal_patch.dart:96
(anonymous) @ main.dart.mjs:507

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel main, 3.24.0-1.0.pre.214, on macOS 14.5 23F79 darwin-arm64,
    locale en-US)
    • Flutter version 3.24.0-1.0.pre.214 on channel main at
      /Users/rexios/repos/flutter
    • Upstream repository [email protected]:flutter/flutter.git
    • Framework revision c63733310f (2 days ago), 2024-07-20 19:26:30 -0400
    • Engine revision 207f088f73
    • Dart version 3.6.0 (build 3.6.0-55.0.dev)
    • DevTools version 2.37.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/rexios/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio
      Preview.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Build 16A5171c
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version unknown)
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build
      17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.91.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.92.0

[✓] Connected device (4 available)
    • Aaron’s iPhone (mobile)         • 00008130-001C35CE3A20001C • ios
      • iOS 17.5.1 21F90
    • macOS (desktop)                 • macos                     • darwin-arm64
      • macOS 14.5 23F79 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin
      • macOS 14.5 23F79 darwin-arm64
    • Chrome (web)                    • chrome                    •
      web-javascript • Google Chrome 126.0.6478.183
    ! Error: Browsing on the local area network for Raj's Apple Vision Pro.
      Ensure the device is unlocked and attached with a cable or associated with
      the same local area network as this Mac. (code -27)
    ! Error: Browsing on the local area network for Joe’s iPhone. Ensure the
      device is unlocked and attached with a cable or associated with the same
      local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code
      -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: platform-viewsEmbedding Android/iOS views in Flutter appse: wasmIssues related to the wasm build of Flutter Web.engineflutter/engine related. See also e: labels.found in release: 3.22Found to occur in 3.22found in release: 3.24Found to occur in 3.24has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions