Skip to content

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

New issue
New issue
Closed
Closed
The new blur is causing text (and images) to flicker#140193
Labels
P2Important issues not at the top of the work listc: renderingUI glitches reported at the engine/skia or impeller rendering levele: impellerImpeller rendering backend issues and features requestsengineflutter/engine repository. See also e: labels.r: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team
@mark8044

Description

@mark8044
mark8044
opened on Dec 15, 2023 · edited by 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]

Activity

mark8044
changed the title [-]The new blur is causing text to flicker[/-] [+]The new blur is causing text (and images) to flicker[/+] on Dec 15, 2023
huycozy
added
in triagePresently being triaged by the triage team
on Dec 15, 2023
huycozy

huycozy commented on Dec 15, 2023

@huycozy
huycozy
on Dec 15, 2023
Member

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.

huycozy
added
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Dec 15, 2023
mark8044

mark8044 commented on Dec 15, 2023

@mark8044
mark8044
on Dec 15, 2023
Author

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
github-actions
removed
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Dec 15, 2023
gaaclarke

gaaclarke commented on Dec 15, 2023

@gaaclarke
gaaclarke
on Dec 15, 2023
Member

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

mark8044 commented on Dec 15, 2023

@mark8044
mark8044
on Dec 15, 2023
Author

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

danagbemava-nc commented on Dec 18, 2023

@danagbemava-nc
danagbemava-nc
on Dec 18, 2023
Member

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!
danagbemava-nc
added
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Dec 18, 2023
gaaclarke

gaaclarke commented on Dec 18, 2023

@gaaclarke
gaaclarke
on Dec 18, 2023
Member

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

gaaclarke
removed
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Dec 18, 2023
danagbemava-nc
added
engineflutter/engine repository. See also e: labels.
c: renderingUI glitches reported at the engine/skia or impeller rendering level
and removed
in triagePresently being triaged by the triage team
on Dec 19, 2023

8 remaining items

bdero
mentioned this in 2 issues on Jan 4, 2024
darshankawar
mentioned this on Jan 4, 2024
jonahwilliams

jonahwilliams commented on Jan 8, 2024

@jonahwilliams
jonahwilliams
on Jan 8, 2024
Member

I think this issue is covered by the bugs that have already been filled but there is a lot of good info here so I will leave it open.

jonahwilliams
added
P2Important issues not at the top of the work list
on Jan 8, 2024
gaaclarke
mentioned this on Jan 9, 2024
gaaclarke
added a commit that references this issue on Jan 12, 2024

[Impeller]: new blur - adds mips for backdrop filters (#49607)

205ed68
rotorgames
mentioned this on Jan 17, 2024
jonahwilliams
added
triaged-engineTriaged by Engine team
on Jan 22, 2024
jonahwilliams

jonahwilliams commented on Jan 22, 2024

@jonahwilliams
jonahwilliams
on Jan 22, 2024
Member

We think this is fixed now. CLosing.

jonahwilliams
closed this as completedon Jan 22, 2024
github-project-automation
moved this from 🤔 Needs Triage to ✅ Done in Impelleron Jan 22, 2024
huycozy
added
r: fixedIssue is closed as already fixed in a newer version
on Jan 23, 2024
github-actions

github-actions commented on Feb 6, 2024

@github-actions
github-actionsbot
on Feb 6, 2024

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 Feb 6, 2024
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 listc: renderingUI glitches reported at the engine/skia or impeller rendering levele: impellerImpeller rendering backend issues and features requestsengineflutter/engine repository. See also e: labels.r: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @bdero@jonahwilliams@gaaclarke@mark8044@danagbemava-nc

        Issue actions
          The new blur is causing text (and images) to flicker · Issue #140193 · flutter/flutter