Skip to content

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

Closed
flutter-team-archive/engine
#54061

Description

@Rexios80

Steps to reproduce

  1. Be on flutter master (platform views were broken on WASM prior to [skwasm] Fix platform view placement. flutter-team-archive/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.

Activity

  1. danagbemava-nc commented on Jul 23, 2024

    @danagbemava-nc
    Member

    Reproducible using the code sample provided above.

    flutter doctor -v
    [✓] Flutter (Channel master, 3.24.0-1.0.pre.227, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
        • Flutter version 3.24.0-1.0.pre.227 on channel master at /Users/nexus/dev/sdks/flutters
        • Upstream repository https://github.com/flutter/flutter.git
        • Framework revision 92a1b9b051 (3 hours ago), 2024-07-23 01:23:07 -0400
        • Engine revision 88726232be
        • Dart version 3.6.0 (build 3.6.0-70.0.dev)
        • DevTools version 2.37.1
    
  2. added
    engineflutter/engine related. See also e: labels.
    a: platform-viewsEmbedding Android/iOS views in Flutter apps
    platform-webWeb applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    e: wasmIssues related to the wasm build of Flutter Web.
    team-webOwned by Web platform team
    and removed
    in triagePresently being triaged by the triage team
    on Jul 23, 2024
  3. jason-simmons commented on Jul 24, 2024

    @jason-simmons
    Member

    The debug banner will not appear in an app built with flutter run --wasm because the Flutter tools do not set the --enable-asserts flag when compiling for Wasm.

    The framework wraps the creation of the banner in an assert so that it will be limited to debug builds.

  4. danagbemava-nc commented on Jul 25, 2024

    @danagbemava-nc
    Member

    @iapicca It doesn't appear to be. The code sample worked as expected when using the canvaskit renderer but not wasm

  5. github-actions commented on Aug 8, 2024

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  6. locked as resolved and limited conversation to collaborators on Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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