PointerInterceptor disappears behind Map after repaint (CanvasKit) #104970

stevendz · 2022-05-30T14:00:48Z

Steps to Reproduce

Execute flutter run on the code sample
Toggle PointerInterceptors or Map

Expected results:
Both Elements (red and green) stay on top of the map

Actual results:
The PointerInterceptor (red/left) will be gone but the plain HTMLElement (green/right) will still be on top.

So why the PointerInterceptor is behind the Map and the plain HTMLElement will stay in front of it?

Code sample

dependencies:
  google_maps: any
  pointer_interceptor: any

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:google_maps/google_maps.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

const String viewTypeInterceptor = 'interceptor';

class _MyAppState extends State<MyApp> {
  bool _isBackgroundVisible = true;
  bool _isInterceptorVisible = true;

  @override
  void initState() {
    super.initState();
    // ignore: undefined_prefixed_name, avoid_dynamic_calls
    ui.platformViewRegistry.registerViewFactory(
      viewTypeInterceptor,
      (int viewId) => DivElement()
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.backgroundColor = 'rgba(0, 255, 0, 0.5)',
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            TextButton(
                onPressed: () => setState(() => _isInterceptorVisible = !_isInterceptorVisible),
                child: const Text('Toggle Interceptors', style: TextStyle(color: Colors.black))),
            TextButton(
                onPressed: () => setState(() => _isBackgroundVisible = !_isBackgroundVisible),
                child: const Text('Toggle Background', style: TextStyle(color: Colors.black))),
          ],
        ),
      ),
      body: Stack(
        children: [
          const SizedBox.expand(),
          Visibility(visible: _isBackgroundVisible, child: getMap()),
          PointerInterceptor(
            debug: true,
            intercepting: _isInterceptorVisible,
            child: const SizedBox(height: 300, width: 300),
          ),
          Positioned(
            right: 0,
            child: Interceptor(isVisible: _isInterceptorVisible),
          ),
        ],
      ),
    );
  }

  Widget getMap() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('map', (_) {
      final div = DivElement()
        ..id = 'map'
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.border = 'none';

      Marker(MarkerOptions()
        ..position = LatLng(1.3521, 103.8198)
        ..map = GMap(
          div,
          MapOptions()
            ..zoom = 10
            ..center = LatLng(1.3521, 103.8198),
        ));

      return div;
    });

    return const HtmlElementView(viewType: 'map');
  }
}

class Interceptor extends StatelessWidget {
  const Interceptor({required this.isVisible, Key? key}) : super(key: key);
  final bool isVisible;
  @override
  Widget build(BuildContext context) {
    if (!isVisible) return const SizedBox(height: 300, width: 300);
    return Stack(
      children: const [
        Positioned.fill(child: HtmlElementView(viewType: viewTypeInterceptor)),
        SizedBox(height: 300, width: 300),
      ],
    );
  }
}

Logs

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3.1 21E258 darwin-arm, locale en-GB)
    • Flutter version 2.10.5 at /Users/stevendzionara/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (6 weeks ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/stevendzionara/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Users/stevendzionara/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8309675/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.1)
    • Android Studio at /Users/stevendzionara/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8309675/Android Studio.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
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.3)
    • IntelliJ at /Users/stevendzionara/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 66.0.3
    • Dart plugin version 213.7371

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.3)
    • IntelliJ at /Users/stevendzionara/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/213.7172.25/IntelliJ IDEA.app
    • 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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Screen.Recording.2022-05-30.at.15.51.03.mov

The text was updated successfully, but these errors were encountered:

huycozy · 2022-05-31T04:10:32Z

Hi. Thank you for reporting this. This issue is reproducible on the latest stable and master channels with provided sample code and using canvaskit renderer.

For the html renderer, the issue is not reproducible.

Demo - HTML renderer

104970_html.mp4

Screenshot inspector - PointerInterceptor is not rendered

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.1 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (8 hours ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/Android Studio.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
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/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
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.1013, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.1013 at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1bf6e0871c (81 minutes ago), 2022-05-30 22:03:11 -0400
    • Engine revision a4d7b6b042
    • Dart version 2.18.0 (build 2.18.0-152.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/Android
      Studio.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
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[!] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/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 find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (4 available)
    • Pixel 3a (mobile)            • 964AY0WL20                           • android-arm64  • Android 12 (API 32)
    • iPad Pro (9.7-inch) (mobile) • 18AFB65F-7639-4B97-86BD-2A60F1B99BBC • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4
      (simulator)
    • macOS (desktop)              • macos                                • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)                 • chrome                               • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

ozz-rjq · 2022-06-08T14:29:13Z

having the same issue

Manatho · 2022-06-08T14:30:43Z

Same here with Mapbox-gl

digiecho · 2022-09-26T00:05:33Z

any update on this?

prasant10050 · 2023-01-09T06:15:34Z

Having the same issue. When google map or HtmlElementView is used in combination with pointer interceptor and stack the application running on the web crashes with the following assertion error:
Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/canvaskit/embedded_views.dart:409:12
_context.pictureRecorders.length == _overlays.length
is not true
Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/canvaskit/embedded_views.dart:609:12
_overlays.length == viewsNeedingOverlays.length
is not true

dab246 · 2023-04-03T04:17:23Z

any update for this?

ditman · 2023-04-28T21:59:28Z

I checked this again and I cannot reproduce the original issue (2022 comments), see this code, I tried to keep it as close to the original as possible (but I was getting errors compiling the original example):

(Click to see code)

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'package:pointer_interceptor/pointer_interceptor.dart';

void main() { 
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

const String viewTypeInterceptor = 'interceptor';
const String viewTypeBackground = 'background';

class _MyAppState extends State<MyApp> {
  bool _isBackgroundVisible = true;
  bool _isInterceptorVisible = true;

  @override
  void initState() {
    super.initState();
    // ignore: undefined_prefixed_name, avoid_dynamic_calls
    ui.platformViewRegistry.registerViewFactory(
      viewTypeInterceptor,
      (int viewId) => DivElement()
        ..addEventListener('click', (event) => window.console.log('Clicked on $viewTypeInterceptor $viewId'))
        ..id = 'interceptor$viewId'
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.backgroundColor = '#0F0',
    );

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewTypeBackground, (int viewId) {
      return DivElement()
        ..addEventListener('click', (event) => window.console.log('Clicked on $viewTypeBackground $viewId'))
        ..id = 'bluebg$viewId'
        ..style.width = "100%"
        ..style.height = "100%"
        ..style.backgroundColor = '#00F';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            TextButton(
                onPressed: () => setState(() => _isInterceptorVisible = !_isInterceptorVisible),
                child: const Text('Toggle Interceptors', style: TextStyle(color: Colors.black))),
            TextButton(
                onPressed: () => setState(() => _isBackgroundVisible = !_isBackgroundVisible),
                child: const Text('Toggle Background', style: TextStyle(color: Colors.black))),
          ],
        ),
      ),
      body: Stack(
        children: [
          const SizedBox.expand(),
          Visibility(visible: _isBackgroundVisible, child: getMap()),
          PointerInterceptor(
            debug: true,
            intercepting: _isInterceptorVisible,
            child: const SizedBox(height: 300, width: 300),
          ),
          Positioned(
            right: 0,
            child: Interceptor(isVisible: _isInterceptorVisible),
          ),
        ],
      ),
    );
  }

  Widget getMap() {
    return const HtmlElementView(viewType: viewTypeBackground);
  }
}

class Interceptor extends StatelessWidget {
  const Interceptor({required this.isVisible, Key? key}) : super(key: key);
  final bool isVisible;
  @override
  Widget build(BuildContext context) {
    if (!isVisible) return const SizedBox(height: 300, width: 300);
    return const Stack(
      children: [
        Positioned.fill(child: HtmlElementView(viewType: viewTypeInterceptor)),
        SizedBox(height: 300, width: 300),
      ],
    );
  }
}

Is google maps really needed to reproduce the issue? Or is any solid HTML Element Input enough?

There's another issue here:

Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/canvaskit/embedded_views.dart:609:12
_overlays.length == viewsNeedingOverlays.length is not true

@hterkelsen is looking at that one. It has to do with the stuff flutter web needs to do to layer canvases and platform views correctly.

pavel604 · 2023-04-30T00:44:41Z

I believe this has been resolved in V3.7, but don't take my word for it...

ditman · 2023-05-05T19:52:15Z

I suspect I fixed this here, but never related it to this issue:

flutter/engine#39506

I'm going to close this as fixed, and if there's still issues, please file a new issue. It'll likely require new reproduction code!

(Looks like the fix will land in the upcoming 3.10 stable)

github-actions · 2023-05-19T20:00:48Z

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.

stevendz changed the title ~~PointerInterceptor is behind Map after repaint~~ PointerInterceptor disappears behind Map after repaint May 30, 2022

huycozy added the in triage Presently being triaged by the triage team label May 31, 2022

stevendz changed the title ~~PointerInterceptor disappears behind Map after repaint~~ PointerInterceptor disappears behind Map after repaint (CanvasKit) May 31, 2022

yjbanov added the P2 Important issues not at the top of the work list label Jun 2, 2022

danagbemava-nc mentioned this issue Jan 9, 2023

[Pointer Interceptor] Flutter google map crashes on the web when used with pointer interceptor #118159

Open

darshankawar mentioned this issue Jan 16, 2023

Wrong scene composition (Canvaskit) when first embedded view is invisible (e.g. using PointerInterceptor) #118452

Closed

darshankawar mentioned this issue Feb 10, 2023

[webview_flutter] V4.0 crashing web apps emloying iframes - unable to create enough overlay surfaces #120413

Closed

stuartmorgan removed the p: first party label Feb 10, 2023

dab246 mentioned this issue Apr 3, 2023

[BUG] tneotia/html-editor-enhanced#394

Open

dab246 mentioned this issue Apr 3, 2023

TF-1688 Fix Tmail UI is broken after user create identity successfully by html style linagora/tmail-flutter#1701

Merged

ditman closed this as completed May 5, 2023

ditman mentioned this issue May 6, 2023

[Web] Link widget makes HtmlElementView disappear #111029

Closed

github-actions bot locked as resolved and limited conversation to collaborators May 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PointerInterceptor disappears behind Map after repaint (CanvasKit) #104970

PointerInterceptor disappears behind Map after repaint (CanvasKit) #104970

stevendz commented May 30, 2022 •

edited

huycozy commented May 31, 2022 •

edited

ozz-rjq commented Jun 8, 2022

Manatho commented Jun 8, 2022

digiecho commented Sep 26, 2022

prasant10050 commented Jan 9, 2023

dab246 commented Apr 3, 2023

ditman commented Apr 28, 2023 •

edited

pavel604 commented Apr 30, 2023

ditman commented May 5, 2023 •

edited

github-actions bot commented May 19, 2023

PointerInterceptor disappears behind Map after repaint (CanvasKit) #104970

PointerInterceptor disappears behind Map after repaint (CanvasKit) #104970

Comments

stevendz commented May 30, 2022 • edited

Steps to Reproduce

huycozy commented May 31, 2022 • edited

ozz-rjq commented Jun 8, 2022

Manatho commented Jun 8, 2022

digiecho commented Sep 26, 2022

prasant10050 commented Jan 9, 2023

dab246 commented Apr 3, 2023

ditman commented Apr 28, 2023 • edited

pavel604 commented Apr 30, 2023

ditman commented May 5, 2023 • edited

github-actions bot commented May 19, 2023

stevendz commented May 30, 2022 •

edited

huycozy commented May 31, 2022 •

edited

ditman commented Apr 28, 2023 •

edited

ditman commented May 5, 2023 •

edited