Impeller only: Clipping a Column doesn't work properly when Column contains a BackdropFilter #151122

ciriousjoker · 2024-07-01T18:39:23Z

Steps to reproduce

Run the code to see the issue, click the buttons for debugging hints.

Essentially create a UI like this:

Column:
- BackdropFilter
- ...

Notes:

Also doesn't work on 3.22.1 & 3.22.2 (haven't tried earlier versions)
Without impeller, it works fine

Expected results

Running the code inside Dartpad works perfectly, this is the expected result:
https://dartpad.dev/?id=24d6cbfbd11466920a36e8f73d75ab27

Actual results

BackdropFilter is blurred properly, but the amber Container is not.

Code sample

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(TestClipping());

class TestClipping extends StatefulWidget {
  const TestClipping({super.key});

  @override
  State<TestClipping> createState() => _TestClippingState();
}

class _TestClippingState extends State<TestClipping> {
  bool _blurTop = true;
  bool _blurBottom = true;
  bool _isReversedDirection = false;
  bool _isReversedOrder = false;

  @override
  Widget build(BuildContext context) {
    final children = [
      ClipRect(
        child: Container(
          color: Colors.blue,
          height: 150,
          width: 150,
          child: Center(
            child: _blurTop
                ? BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      height: 30,
                      width: 30,
                    ),
                  )
                : null,
          ),
        ),
      ),
      ClipRect(
        child: Container(
          color: Colors.amber,
          height: 150,
          width: 150,
          child: Center(
            child: _blurBottom
                ? BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      height: 30,
                      width: 30,
                    ),
                  )
                : null,
          ),
        ),
      ),
    ];

    return MaterialApp(
      home: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _blurTop = !_blurTop;
                });
              },
              child: Text("toggle top blur (works as expected without blur)"),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _blurBottom = !_blurBottom;
                });
              },
              child: Text(
                  "toggle bottom blur (just there to show that clipping sometimes works)"),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isReversedDirection = !_isReversedDirection;
                });
              },
              child: Text("reverse column directionality "),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isReversedOrder = !_isReversedOrder;
                });
              },
              child: Text("reverse column children order"),
            ),
            Container(
              width: 300,
              color: Colors.red,
              child: ClipOval(
                child: Container(
                  height: 300,
                  width: 300,
                  color: Colors.green,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    verticalDirection: _isReversedDirection
                        ? VerticalDirection.up
                        : VerticalDirection.down,
                    children: _isReversedOrder
                        ? children.reversed.toList()
                        : children,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Logs

N/A, logs are completely empty

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale de-DE)
    • Flutter version 3.22.2 on channel stable at /Volumes/Storage/Cache/fvm/versions/3.22.2
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (4 weeks ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Volumes/Storage/Development/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Volumes/Storage/Development/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Volumes/Storage/Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.3)
    • 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.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (3 available)
    • iPhone 15 (mobile)              • 62AF32F0-EF0C-4FF3-9809-E79B25181495 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
    • 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.127

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

• No issues found!

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

huycozy · 2024-07-02T07:40:49Z

Thank you for the report. Reproduced this on master channel as well.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.2 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (3 weeks ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.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.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.3)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 126.0.6478.127

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

• No issues found!

[!] Flutter (Channel master, 3.23.0-14.0.pre.89, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.23.0-14.0.pre.89 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 66d5123604 (2 hours ago), 2024-07-01 21:31:31 -0400
    • Engine revision fc5bc14e60
    • Dart version 3.5.0 (build 3.5.0-321.0.dev)
    • DevTools version 2.37.0
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.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.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.3)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 126.0.6478.127
    ! Device 2B171FDH20084L is not authorized.
      You might need to check your device for an authorization dialog.

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

! Doctor found issues in 1 category.

jason-simmons · 2024-07-08T23:53:33Z

This is related to an optimization that applies a scissor when drawing clips (see flutter/engine@918bf19)

The example app renders correctly if I patch EntityPass::RenderElement to set the scissor using the replay entity's clip coverage instead of the clip stack's current coverage:

    for (const auto& replay : replay_entities) {
      SetClipScissor(replay.clip_coverage.value(), *result.pass,
                     global_pass_position);
  }

@bdero

jonahwilliams · 2024-09-07T23:20:40Z

This was fixed in flutter/engine#54673

github-actions · 2024-09-23T04: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.

huycozy added the in triage Presently being triaged by the triage team label Jul 2, 2024

jonahwilliams added P1 High-priority issues at the top of the work list triaged-engine Triaged by Engine team labels Jul 8, 2024

jonahwilliams closed this as completed Sep 7, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label Sep 9, 2024

github-actions bot locked as resolved and limited conversation to collaborators Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Impeller only: Clipping a Column doesn't work properly when Column contains a BackdropFilter #151122

Impeller only: Clipping a Column doesn't work properly when Column contains a BackdropFilter #151122

ciriousjoker commented Jul 1, 2024 •

edited

Loading

huycozy commented Jul 2, 2024

jason-simmons commented Jul 8, 2024

jonahwilliams commented Sep 7, 2024

github-actions bot commented Sep 23, 2024

Impeller only: Clipping a Column doesn't work properly when Column contains a BackdropFilter #151122

Impeller only: Clipping a Column doesn't work properly when Column contains a BackdropFilter #151122

Comments

ciriousjoker commented Jul 1, 2024 • edited Loading

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Jul 2, 2024

jason-simmons commented Jul 8, 2024

jonahwilliams commented Sep 7, 2024

github-actions bot commented Sep 23, 2024

ciriousjoker commented Jul 1, 2024 •

edited

Loading