[web] flutter 3.10.0 transforming HtmlElementView malforms hittest behaviour

[maRci002]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

When using Transform or FittedBox (which also transforms the child widget) as the parent of HtmlElementView, the hit test is malformed in Flutter 3.10.0.

Expected results

3.7.12

flutter.3.7.12.mp4

Actual results

3.10.0

flutter.3.10.mp4

Code sample

Code sample

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() {
  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory('div_html', (int viewId) {
    final div = DivElement();
    div.style.cssText = 'background-color: #ABBAEA; width: 400px; height: 400px;';
    return div;
  });

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        height: 300,
        child: ColoredBox(
          color: Colors.red,
          child: Stack(
            children: [
              FittedBox(
                fit: BoxFit.cover,
                child: SizedBox(
                  width: 400,
                  height: 400,
                  child: HtmlElementView(
                    viewType: 'div_html',
                    onPlatformViewCreated: (id) => print('View created: $id'),
                  ),
                ),
              ),
              Positioned(
                left: 90,
                top: 90,
                child: ElevatedButton(
                  onPressed: () => print('button pressed'),
                  child: const Text('BTN'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

No response

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.10.0, on Microsoft Windows [Version 10.0.19045.2965], locale hu-HU)
    • Flutter version 3.10.0 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (4 days ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\maRci002\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.4.33403.182
    • Windows 10 SDK version 10.0.20348.0

[√] Android Studio (version 2022.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 17.0.6+0-b2043.56-9586694)

[√] VS Code (version 1.77.2)
    • VS Code at C:\Users\maRci002\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.44.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2965]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 113.0.5672.93
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 112.0.1722.64

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

• No issues found!

[huycozy]

Thanks for the report! This issue is reproducible on the latest stable and master channels. Meanwhile, it works as expected on previous Flutter version 3.7.12.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84a1e904f4 (35 hours ago), 2023-05-09 07:41:44 -0700
    • Engine revision d44b5a94c9
    • Dart version 3.0.0
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.92

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

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.63, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-6.0.pre.63 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7b8f7a2a64 (5 hours ago), 2023-05-14 17:42:29 -0400
    • Engine revision 326de1d849
    • Dart version 3.1.0 (build 3.1.0-110.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.92

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

! Doctor found issues in 1 category.

[jason-simmons]

Bisected this to flutter/engine@5bae183

@ditman

[ditman]

I'll escalate the original issue to reflect this is a crowd issue:

• [web] Teach pointer_binding how to understand 3D transformed apps. #117091

[fhuonder]

Is there any workaround?

[fhuonder]

Found a workaround:
Based on this comment #125948 (comment) I added the following CSS to the index.html

flt-glass-pane * {
      pointer-events: none;
}

and then it behaves correctly. As far as I can test.

[htoor3]

@fhuonder unfortunately that workaround breaks certain functionality like triggering context menus.

[yjbanov]

flutter/engine#41870 doesn't seem to cover this case, so I'm accepting this issue as a new one. Feel free to correct me, @htoor3.

[htoor3]

flutter/engine#41870 doesn't seem to cover this case, so I'm accepting this issue as a new one. Feel free to correct me, @htoor3.

You're correct. That PR only fixes the issue for inputs, although hopefully we can use a similar strategy for platform views.

[agilerdev]

I'm using the responsiveFramework package that uses a FittedBox to scale the view of the application, and got the same error when I upgraded to flutter 3.10.

[ditman]

@yjbanov, I have added a small change to @htoor3 PR to address this issue as well (and others).

[ditman]

A fix is coming to Flutter master soon: #127233 (we're also attempting to cherry-pick so it becomes available to everybody on stable (3.10): #127229

[ditman]

A hotfix to alleviate this issue has been released on stable, version: 3.10.2 (See full changelog).

[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.