The new blur is causing text (and images) to flicker

[mark8044]

Steps to reproduce

@bdero
@gaaclarke

This bug is being re-posted after request(flutter/engine#48472 (comment), flutter/engine#48472 (comment))

Flutter 3.18.0-11.0.pre.55 • channel master • https://github.com/flutter/flutter.git
Framework • revision 0b6da5b450 (3 hours ago) • 2023-12-14 18:16:50 -0500
Engine • revision 0b0fab8215
Tools • Dart 3.3.0 (build 3.3.0-220.0.dev) • DevTools 2.30.0

Problem:

Text that is being blurred now flickers during a scroll. If the text is held still under the blur there is no flicker, however when scrolling, then a flickering of the text occurs. The problem seems to get worse when a finger is lifted and the scroll slows down with friction scrolling.

In my case, this is happening when using a scrollable Listview that contains black text on a white background. Overlaying the listview is a blurred Container created using a BackdropFilter.

The listview and the container live together in a Stack widget

Here's a video showing the problem from the simulator. The problem is a bit more apparent on a real device, but for sure its there on the simulator

EDIT/UPDATE: Images also flicker

Screen.Recording.2023-12-14.at.5.51.56.PM.mov

Problem source:

The problem starting occurring with the launch of the new blur flutter/engine#48472 (or possibly flutter/engine#49038). Both those updates are in commit 0b6da5b45088bb1d8a9b1d1e89f3b7d1437390c4 which is where the problem has started. It looks like that commit will be reverted soon, so lets enjoy the problem while it lasts

Expected results

No flickering of text

Actual results

Flicker of text

Code sample

Code sample

My code is quite large and will be difficult to put here, but conceptually it is a container with a backdrop filter sitting in a stack on top of a lsitview 

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

[huycozy]

Hi @mark8044
I'm checking this on the same master channel version with below sample code but can't seem to see the issue.

Sample code

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                if (index % 2 == 0) return const Divider();
                return ListTile(
                  title: Container(
                    margin: const EdgeInsets.symmetric(vertical: 8),
                    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
                    child: Text('Hello $index'),
                  ),
                  leading: const Icon(Icons.ac_unit),
                );
              },
            ),
            ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: Container(
                  alignment: Alignment.center,
                  height: 400.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Demo video (iPhone 7, iOS 15.8)

RPReplay_Final1702633829.mp4

Could you also try this sample code on your end and confirm? If the sample needs to be updated, please help to do.

[mark8044]

Hi @mark8044 I'm checking this on the same master channel version with below sample code but can't seem to see the issue.

Sample code
Demo video (iPhone 7, iOS 15.8)
Could you also try this sample code on your end and confirm? If the sample needs to be updated, please help to do.

Your sample doesn't do it because your SigmaX and SigmaY are too low. If you put it up to say 20 for example, you will see the problem.

Here is an example where I set it to 40

Screen.Recording.2023-12-15.at.7.02.21.AM.mov

[gaaclarke]

I think this is related to subpixel alignment in the downsampled image. Once the pixels get bigger, the subpixel math becomes more prominent. It's going to be tricky to fix. Thanks for reporting.

[mark8044]

I think this is related to subpixel alignment in the downsampled image. Once the pixels get bigger, the subpixel math becomes more prominent. It's going to be tricky to fix. Thanks for reporting.

@gaaclarke
Incase its meaningful: Blurring as it stood, just before yesterdays commit was absolutely perfect to my eyes at least. Very smooth, lag free and platform native appearing. And very performant (on my devices: iPhone X, iPhone 13, iPhone 14 pro, S21 Samsung).

I know there have been other improvements to backdrop filter blur in the past few weeks and they were all really good too.

Hope this extra information has some significance

[danagbemava-nc]

Hi @mark8044, which of the sigma values did you set to 40? When I set both to 40, the blur is barely visible and if I set it to 20 (for both), I do not see the issue on my iPhone XS. I tested on the latest master. Please see the recordings below

recordings

20	40
RPReplay_Final1702874954.MP4	RPReplay_Final1702874982.MP4

flutter doctor -v

[✓] Flutter (Channel master, 3.18.0-11.0.pre.96, on macOS 14.1.2 23B92 darwin-arm64, locale en-GB)
    • Flutter version 3.18.0-11.0.pre.96 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 32d42b63de (16 hours ago), 2023-12-17 07:39:25 -0500
    • Engine revision 626c93260f
    • Dart version 3.3.0 (build 3.3.0-238.0.dev)
    • DevTools version 2.31.0-dev.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0-rc1
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Release.Candidate.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/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.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.10072.19

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

[✓] Connected device (4 available)
    • Nexus (mobile)       • 00008020-001875E83A38002E • ios            • iOS 17.2 21C62
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.1.2 21B101
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.1.2 23B92 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 120.0.6099.109

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

• No issues found!

[gaaclarke]

@danagbemava-nc the new blur is off by default now. There were some benchmarks that were experiencing memory problems after it landed. This bug is still relevant.