Skip to content

BackdropFilter flicker effect when element scrolls off-screen. #104769

New issue
New issue
Closed
Closed
BackdropFilter flicker effect when element scrolls off-screen.#104769
Labels
P2Important issues not at the top of the work lista: imagesLoading, displaying, rendering imagesf: scrollingViewports, list views, slivers, etc.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.r: solvedIssue is closed as solved
@TheMeanCanEHdian

Description

@TheMeanCanEHdian
TheMeanCanEHdian
opened on May 26, 2022

I am using BackdropFilter to blur the background of cards in a list. When a card scrolls off-screen the blur seems to change based on what is visible which can cause a flickering effect (as seen in the below video).

Is there a way to adjust this behavior so that the blur takes into consideration what is just off-screen?

qemu-system-x86_64_0YorKE9zwB.mp4

Activity

exaby73
added
in triagePresently being triaged by the triage team
on May 27, 2022
exaby73

exaby73 commented on May 27, 2022

@exaby73
exaby73
on May 27, 2022
Member

Hello @TheMeanCanEHdian. Can you please provide a minimal, reproducible example so that we can verify this issue?

exaby73
added
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on May 27, 2022
TheMeanCanEHdian

TheMeanCanEHdian commented on May 27, 2022

@TheMeanCanEHdian
TheMeanCanEHdian
on May 27, 2022 · edited by TheMeanCanEHdian
Author

@exaby73 here you go: https://github.com/TheMeanCanEHdian/image_filter_flicker

Additionally, below is an output of flutter doctor -v and a video showing the flickering issues with BackdropFilter as well as an issue preventing me from using ImageFiltered (including with Material 3 overscroll behavior).

qemu-system-x86_64_9ZvzH2WxXZ.mp4 
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19044.1706], locale en-US)
    • Flutter version 3.0.1 at D:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (8 days 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 30.0.3)
    • Android SDK at C:\Users\driva\AppData\Local\Android\sdk
    • Platform android-31, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
    • All Android licenses accepted.

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

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2021.1)
    • 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 11.0.11+9-b60-7590822)

[√] VS Code, 64-bit edition (version 1.67.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.40.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 12 (API 31) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.19044.1706]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 102.0.5005.61
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 101.0.1210.53

[√] HTTP Host Availability
    • All required HTTP hosts are available
github-actions
removed
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on May 27, 2022
exaby73

exaby73 commented on May 30, 2022

@exaby73
exaby73
on May 30, 2022
Member

This issue is reporducible in latest stable and master channels.

Video
104769_android_stable.mov
Code sample 
import 'package:flutter/material.dart';

import 'backdrop_filter_list.dart';
import 'image_filtered_list.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(useMaterial3: true),
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Filter Examples'),
      ),
      body: Row(
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const BackdropFilterList(),
                      ),
                    );
                  },
                  child: const Text('Backdrop Filter List'),
                ),
                const SizedBox(height: 8),
                ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const ImageFilteredList(),
                      ),
                    );
                  },
                  child: const Text('Image Filtered List'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
flutter doctor -v (Stable) 
[✓] Flutter (Channel stable, 3.0.1, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.0.1 at /Users/nabeelparkar/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (10 days 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 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/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.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] 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)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.58

[✓] 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)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 12 (API 32) (emulator)
    • iPhone 13 Pro Max (mobile)  • 16B8F156-111C-489F-A6E5-2D79142036B4 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)                • chrome                               • web-javascript • Brave Browser 102.1.39.111

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

• No issues found!
flutter doctor -v (Master) 
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1005, on macOS 12.4 21F79 darwin-arm, locale en-US)
    • Flutter version 3.1.0-0.0.pre.1005 at /Users/nabeelparkar/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c2e10541f3 (2 hours ago), 2022-05-30 00:18:09 -0400
    • Engine revision bb9926b0e6
    • Dart version 2.18.0 (build 2.18.0-151.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/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.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] 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)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.58

[✓] 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)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 12 (API 32) (emulator)
    • iPhone 13 Pro Max (mobile)  • 16B8F156-111C-489F-A6E5-2D79142036B4 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)                • chrome                               • web-javascript • Brave Browser 102.1.39.111

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

• No issues found!
exaby73
added
frameworkflutter/packages/flutter repository. See also f: labels.
f: material designflutter/packages/flutter/material repository.
f: scrollingViewports, list views, slivers, etc.
found in release: 3.0Found to occur in 3.0
found in release: 3.1Found to occur in 3.1
a: imagesLoading, displaying, rendering images
and removed
in triagePresently being triaged by the triage team
on May 30, 2022
HansMuller

HansMuller commented on Jun 2, 2022

@HansMuller
HansMuller
on Jun 2, 2022
Contributor

@flar - any ideas about why this is happening?

TheMeanCanEHdian
mentioned this on Jun 3, 2022
HansMuller
removed
f: material designflutter/packages/flutter/material repository.
on Jun 9, 2022
Piinks
added
P2Important issues not at the top of the work list
on Jun 16, 2022
TheMeanCanEHdian

TheMeanCanEHdian commented on Oct 22, 2022

@TheMeanCanEHdian
TheMeanCanEHdian
on Oct 22, 2022
Author

Hello,

I was wondering if there was any additional insight behind this issue.

flar

flar commented on Oct 22, 2022

@flar
flar
on Oct 22, 2022 · edited by flar
Contributor

BackdropFilter applies the filter to what is behind the widget. As an item scrolls into view, different parts of it become visible and it can only base its filtered output on what is drawn on screen. As a brighter or darker part of the image becomes visible the resulting blurred pixels will increase or decrease in brightness, but only ever based on what has been rendered underneath the widget. The BackdropFilter is working as intended here, but the desired outcome doesn't match with that specific widget's intended behavior.

The ImageFiltered variant is a better match between what is intended and how the widget works, but the particular implementation is running afoul of attempting to apply a TileMode.clamp sampling mode to a source that doesn't have a defined pixel-aligned edge. As the tiles are slightly scaled when over-scrolling, the background is scaled to N+fraction pixels and the fractional pixels on the edge will "bleed" the blur effect differently as they become nearly full or nearly empty of pixel data. Using TileMode.decal will produce more consistent results with this subtle fraction-of-a-pixel scaling that is happening.

TheMeanCanEHdian

TheMeanCanEHdian commented on Oct 22, 2022

@TheMeanCanEHdian
TheMeanCanEHdian
on Oct 22, 2022
Author

@flar Thank you for your reply and detailed explanation. I was able to achieve satisfactory results using TileMode.decal.

TheMeanCanEHdian
closed this as completedon Oct 22, 2022
exaby73
added
r: solvedIssue is closed as solved
on Oct 24, 2022
github-actions

github-actions commented on Nov 7, 2022

@github-actions
github-actionsbot
on Nov 7, 2022

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.

github-actions
locked as resolved and limited conversation to collaborators on Nov 7, 2022
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

    P2Important issues not at the top of the work lista: imagesLoading, displaying, rendering imagesf: scrollingViewports, list views, slivers, etc.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.r: solvedIssue is closed as solved

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @HansMuller@TheMeanCanEHdian@Piinks@flar@exaby73

        Issue actions
          BackdropFilter flicker effect when element scrolls off-screen. · Issue #104769 · flutter/flutter