Skip to content

ImageFilter.blur bright edges and clip when resizing #64828

@markusaksli-nc

Description

@markusaksli-nc

ImageFiltered with ImageFilter.blur has this strange clip/border effect that is affected by size. This causes some jank when resizing a desktop window on both macOS and Windows:

And jank when resizing the filtered widget in general:

Reproducible on master 1.22.0-2.0.pre.105 on Windows, macOS and Android. The desktop resizing issue could maybe be chalked up to #44136 on macOS for now but on Windows that was supposedly fixed #30671 (comment)? Related to layout moving the widget across sub-pixel boundaries when resizing rather than any desktop-specific issue.

The expected behavior can actually be seen with flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

Minimal reproducible code sample
import 'dart:ui';
import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Sample',
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var width = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Card(
        child: Container(
          height: 50,
          child: Slider(
            max: min(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height),
            min: 10,
            value: width,
            onChanged: (double value) => setState(() => width = value),
          ),
        ),
      ),
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Center(
        child: SizedBox(
          width: width,
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
            child: Image.network(
                "https://cdna.artstation.com/p/assets/images/images/028/571/260/large/lower-third-logo-dark.jpg?1594844508"),
          ),
        ),
      ),
    );
  }
}
Desktop resizing sample
import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample'),
        ),
        body: Center(
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
            child: Container(
              width: 50,
              height: 50,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}
flutter doctor -v
[√] Flutter (Channel master, 1.22.0-2.0.pre.105, on Microsoft Windows [Version 10.0.19041.450], locale en-US)
    • Flutter version 1.22.0-2.0.pre.105 at C:\Development\flutter_master
    • Framework revision cad4d1333e (11 hours ago), 2020-08-27 17:48:05 -0700
    • Engine revision 77dd1c05b9
    • Dart version 2.10.0 (build 2.10.0-67.0.dev)


[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at C:\Users\marku\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

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

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.5)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.6.30320.27
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.0)
    • Android Studio at C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (4 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)           • windows       • windows-x64    • Microsoft Windows [Version 10.0.19041.450]
    • Web Server (web)            • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 85.0.4183.83

• No issues found!

cc @flar

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: imagesLoading, displaying, rendering imagesa: qualityA truly polished experiencec: renderingUI glitches reported at the engine/skia or impeller rendering levelengineflutter/engine related. See also e: labels.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions