Skip to content

[Impeller] ColorFiltered on top of ImageFiltered Widget with Blur causes UI glitches. #135212

@b-ray

Description

@b-ray

Is there an existing issue for this?

Steps to reproduce

  1. Run the sample code provided - with a Stack containing a Blurred Container below a ColorFiltered Widget and an Animated Element on top (in this case a animating CupertinoActivityIndicator)

This is a follow-up on #135013

I was able to reproduce this on:

3.14.0-14.0.pre.358 with Impeller
3.13.4 with Impeller (where the glitch looks different)
The issue does not occur when using Skia.

(I am able to work around the glitches using BackdropFilter, but I am not sure if this is proper fix - I am worried about performance issues)

Expected results

The animation and surrounding box should be drawn properly.

Actual results

The surrounding box of the animation has glitches. Please see screenshot.

Code sample

Code sample
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.2), BlendMode.srcOver),
              child: Container(
                decoration: const BoxDecoration(
                  gradient: RadialGradient(
                    radius: 0.3,
                    colors: [Colors.pink, Colors.green],
                  ),
                ),
              ),
            ),
          ),
          const Center(
            child: CupertinoActivityIndicator(
              radius: 30,
              animating: true,
            ),
          )
        ],
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Skia (Expected Result):
Simulator Screenshot - iPhone 11 Pro - 2023-09-19 at 17 52 33

Impeller (Actual Result):
Impeller

Logs

No Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel master, 3.14.0-14.0.pre.358, on macOS 13.5.2 22G91 darwin-arm64, locale en-AT)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.82.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work liste: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.found in release: 3.13Found to occur in 3.13found in release: 3.14Found to occur in 3.14has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: 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

    Issue actions