[Stable 3.3+] Rendering issues (Artefacting / Half-rendered widgets) #111376
Comments
|
Hi @hm122, what platforms are your users experiencing this issue on? Can you also share some screen recordings so that we can see what the issue looks like? |
danagbemava-nc
added
the
waiting for customer response
|
I'm having the same problems with Android devices. The problematic flutter version is 3.3.1. Dart version 2.18.0. Android API level 32. There is no error log on debug mode. |
|
@hm122 I'm curious if you have similar rendering issues to this one? #110885 (comment) |
|
Hi @onurkagan, can you share some recordings along with a minimal reproducible code sample so that we can investigate this? |
|
It was on Android and iOS. I was able to reproduce some of the issues locally, even in the emulator. Will try to provide code & screencasts asap. @TatsuUkraine One of them looked similar, not exactly the same though. Part of the lower screen was the correct view, while part of the upper screen was the view that has been rendered before. Interestingly this issue was not visible when making a screencast. In the screencast it looked correct. |
github-actions
bot
removed
the
waiting for customer response
danagbemava-nc
added
the
waiting for customer response
|
@hm122 yeah, I also have different render issues each time. On a video I recorded just an example how it looks like |
|
@danagbemava-nc I found most simple code to reproduce it) but it may take time before you actually can see the issue since it happens from time to time. The video shows just most simple render issue, in the real app I'm experiencing worse UI render issues in various part of the screen. Same as before - when I'm trying to make a screen record it doesn't show what is actually going on on a screen Code sampleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('App Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showLicensePage(
context: context,
applicationIcon: Image.asset(
'assets/flutter_icon.png',
height: 50,
),
applicationName: 'Some App Name',
applicationVersion: '1.0.0',
);
},
child: const Text('SHOW LICENCES'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Videoscreen-20220914-110050.2.mp4 |
|
@danagbemava-nc it seems @hm122 replied on your question, but this issue still has |
|
Copy steps to reproduce with code sample from another ticket per @exaby73 request Steps to ReproduceTry to use code sample. Scroll down and up until you see the issue with rendering. The issue can be seen from time to time. Also it can't be captured with a screen record. On a screen record UI looks good and it doesn't show what is actually going on on the screen
Another example
Expected results: UI should render without artifacts Actual results: some of UI parts aren't repainted correctly Additional infoDevice: Pixel 5 All works fine with flutter 3.0. Also scroll in 3.0 is much smoother than in 3.3 Code sampleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final DraggableScrollableController _controller = DraggableScrollableController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
const SliverAppBar(
automaticallyImplyLeading: false,
title: Text('App Example'),
),
SliverFillRemaining(
hasScrollBody: false,
child: Center(
child: ElevatedButton(
onPressed: () {
showLicensePage(
context: context,
applicationIcon: Image.asset(
'assets/flutter_icon.png',
height: 50,
),
applicationName: 'Some App Name',
applicationVersion: '1.0.0',
);
},
child: const Text('SHOW LICENCES'),
),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
bottomSheet: MediaQuery.fromWindow(
child: LayoutBuilder(
builder: (context, constraints) {
final EdgeInsets safePadding = MediaQuery.of(context).padding;
final double minExtent = (kToolbarHeight + 8) / constraints.biggest.height;
return DraggableScrollableSheet(
controller: _controller,
snapSizes: [
minExtent,
.5,
],
snap: true,
initialChildSize: minExtent,
minChildSize: minExtent,
maxChildSize: 1,
expand: false,
builder: (context, controller) {
final double currentExtent = _extent ?? minExtent;
final bool expanded = currentExtent > .9;
return DecoratedBox(
decoration: const BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 8.0,
color: Colors.black54,
offset: Offset(0, 4),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.vertical(
top: Radius.circular(
Tween<double>(begin: 10.0, end: 0.0)
.chain(_curve)
.transform(currentExtent)
),
),
child: Material(
color: Theme.of(context).colorScheme.surface,
child: CustomScrollView(
controller: controller,
physics: const ClampingScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
top: Tween(begin: 8.0, end: safePadding.top - 4)
.chain(_curve)
.transform(currentExtent),
),
sliver: SliverAppBar(
centerTitle: true,
pinned: true,
primary: false,
elevation: 0,
leading: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: expanded
? const CloseButton()
: null,
),
title: const Text('Bottom sheet'),
backgroundColor: Theme.of(context).colorScheme.surface,
foregroundColor: Theme.of(context).colorScheme.onSurface,
),
),
],
),
),
),
);
}
);
}
),
),// This trailing comma makes auto-formatting nicer for build methods.
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Animatable<double> get _curve => CurveTween(
curve: const Interval(.75, 1, curve: Curves.easeIn)
);
double? get _extent => _controller.isAttached ? _controller.size : null;
}
LogsVideosscreen-20220914-110050.2.mp4screen-20220919-112530.2.mp4 |
|
Hi @TatsuUkraine, I'm curious, are you only facing this issue on a Pixel 5? |
|
hi @danagbemava-nc . it looks similar but I can't confirm that it's exactly the same, I didn't see the render issue recorded in #111551 in our real app. As for devices so far I tried Pixel 2xl, Pixel 4, Pixel 5, Pixel 6 (all real devices). Was able to reproduce this issue only on Pixel 5 and Pixel 4 so far. P.S as for pixle 4 - can't confirm it on 100% since this device is not mine, and it's impossible to make a screen record since this issue doesn't capture there, but according to feedback from friend of mine, he said that he can reproduce this bug on his device |
|
Hi @TatsuUkraine, can you share the asset you used in your code sample? |
|
@danagbemava-nc you can use any, I used ic_launcher.png file from regular flutter template project |
|
Hi @TatsuUkraine, I can't seem to reproduce the issue on my Can you check if this still reproduces for you on the |
|
@danagbemava-nc I tried stable master and beta, everywhere I can reproduce it. Only on pixel 4 and 5 (only real devices), on pixel 6 and pixel 2xl - all works fine it seems it may be related to dpr but I can't say for sure |
|
@danagbemava-nc also I tried 3.0.5 (prev stable version) and I wasn't been able to reproduce this bug on any device there, also scroll looks much smoother on 3.0 as well |
|
overall it's somehow similar to what was reported in Gallery app - also from time to time, also on certain devices, and also can't be captured with a screen record (screen record captures not what is actually happening on a screen) |
|
There are lots of severe rendering issues on Linux desktop. This is not just a mobile issue. It's like the anti-aliasing algorithm is broken. Just hovering the mouse across window frame borders can cause the app to re-render into an awful mess. Move it some more, and then it renders correctly. I've had to downgrade back to 3.0.5, which is very stable in its rendering. |
|
@TatsuUkraine, thanks for the report. Since I can't reproduce this issue locally, I will label it for further investigation by the team. This seems to be a regression as all the comments in this issue state that it happened after the upgrade to 3.3 This doesn't seem to be limited to mobile only, as noted in #111376 (comment) or any specific mobile platform as reported in #111376 (comment) Could be related to #111551 Some of the issues can be found in #111376 (comment). |
danagbemava-nc
added
c: regression
|
similar issues 🙏 |
danagbemava-nc
changed the title
danagbemava-nc
changed the title
VID_2022-09-23-23-59-04-405.2.mp4
|
|
From Triage: @HansMuller Can you add the context for why @jonahwilliams was assigned? I am not sure he is currently looking into this. I'll try to get this and the linked issue reproduced. |
|
I asked to be assig |
|
Oops. I asked to be assigned last week, but that was Friday afternoon so I haven't investigated yet |
|
I can reproduce it as well, it happened when I upgrade to 3.3+ IMG_2293.movDevice: |
|
@danagbemava-nc I just tried to turn off smooth display (to keep 60hz refresh rate) on my pixel 5 and render issues disappeared |
|
Is anyone from flutter team looking at this issue? I am facing exact same issue on flutter 3.3+. I had to downgrade flutter version to 2.8 because of that. I am using pixel 4XL. |
|
We believe that this is related to the CP we have scheduled in #112603, however we have been unable to reproduce this particular issue. If you are experiencing this and you have a reliable reproduction, it would be helpful if you could temporarily switch to the master channel where the revert has already landed and confirm. |
|
@jonahwilliams if it helps, I put code sample with steps to reproduce + video here #111376 (comment) I was able to easily reproduce it on devices with refresh rate > 60hz, switching off smooth display fixes the issue |
|
I've tried that example and I can't reproduce it locally unforunately |
|
Hm, ok, I will try master channel and check if it still there |
|
@jonahwilliams it looks to me that on master channel all works fine, and the scroll also feels smoother |
|
For me, it only happens on release builds. I'll check master branch as well. |
|
We've published a new stable hotfix that contains a fix for similar issues. Please let me know if you're still experiencing this issue after upgrading to 3.3.4 |
|
Need to play more with the app, but so far I don't see any render issues after updating to 3.3.4 |
It seems like the issue is resolved on 3.3.4. |
|
Great! Closing this as fixed then |
|
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 |
Since the upgrade to Flutter 3.3.0, I'm getting different feedback from users that they are experiencing weird rendering issues.
Steps to Reproduce
Expected results: No flickering/rendering errors
Actual results: Flickering borders, half rendered views. Most of the time, the rendering issues seem to disappear when changing the view or tapping into the screen.
Code sample
Sometimes the border of text input fields flickers. Could be related to very thin borders.
Sometimes views get half rendered when changing screen with a BottomNavigationBar.
Logs
I have downgraded to Flutter 3.0.5 for now, therefore I can not provide `flutter analyze/doctor` infoThe text was updated successfully, but these errors were encountered: