ImageFilter.blur bright edges and clip when resizing #64828
Comments
markusaksli-nc
added
a: images
|
Judging from the dynamic behavior, I believe what we are seeing is that the underlying blurred object is rendered on pixel boundaries in some frames, leading to crisp borders when blurred, and on sub-pixel boundaries in other frames, leading to the edge pixels having a non-opaque alpha which then gets blurred into the edge pixels. This would also explain why it sometimes happens on only horizontal or vertical edges and sometimes happens on both since each of the horizontal and vertical positions can independently land on a pixel boundary. It appears that the width/height is an even number of (DPI scaled) pixels across as each pair of edges respond identically to each other. Flutter has a devicePixelRatio that you can query to try to make things sized on a multiple of real pixels, but if you are using layout widgets like "Center" then you are at the mercy of it's calculation as to where you are positioned on the screen. Non-web flutter may differ here in that the child to be blurred is usually rendered in an off-screen texture and then blurred so it will always land on 0,0 in the texture and never have an anti-aliased edge. The web code may not have a matching implementation. |
|
This is supported by the fact that it happens at regular intervals. Also when removing the layout widgets, the sub-pixel boundaries don't get tossed around when resizing the window on desktop so the non-opaque bleed stays constant. Modified code sampleimport 'dart:ui';
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: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: const Icon(Icons.remove), onPressed: () => setState(()=> width -= 2)),
IconButton(icon: const Icon(Icons.add), onPressed: () => setState(()=> width += 2)),
],
)
),
),
appBar: AppBar(
title: Text('Sample'),
),
body: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
child: SizedBox(
width: width,
height: 100.0,
child: Image.network(
"https://cdna.artstation.com/p/assets/images/images/028/571/260/large/lower-third-logo-dark.jpg?1594844508", fit: BoxFit.fill,),
),
),
);
}
}
|
|
I can reproduce the issue flutter doctor -v |
|
I think I've found the reason that it can sometimes appear more pronounced. If the radius is large then Skia will down-sample the image and use a smaller convolution kernel for speed. It appears that they don't take into account the fact that if the blur filter is using a |
kf6gpe
added
a: quality
|
I am also seeing this behaviour when used inside a scroll view. |
|
Verified this issue using latest versions and observed that the resizing the filtered widget behavior still persists: 64828.movWhereas, the desktop resizing jank is not replicable after verifying on macOS desktop, as below: 64828_d.movstable, master flutter doctor -vKeeping this issue open, as the mobile platform behavior persists and also for team's attention. /cc @flar |
darshankawar
added
found in release: 3.3
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-engine
|
This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
flutter-triage-bot
bot
added
the
⏳
|
This issue is assigned to @flar but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks! |
flutter-triage-bot
bot
removed
the
⏳
|
I dont know if this is related, but i have a problem with ImageFilter.blur only on the web Container( You can see the difference from Windows to WEB WEB: |
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.105on 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=trueMinimal reproducible code sample
Desktop resizing sample
flutter doctor -v
cc @flar
The text was updated successfully, but these errors were encountered: