Images become corrupted when using CanvasKit #97103
Comments
|
This happens to me too, and it's not consistent, it only happens sometimes, It happens when multiple images with a circular progress indicator are displayed (being upoloaded images). Here is the widget in question, it's hit or miss when it happens: |
|
After some exploration, I've come up with a simple repro case. From what I can tell, the "corruption" usually (but not always) affects the top image in a Stack. It seems that there must be at least two different images in the stack for the issue to occur. Placing only one image in the Stack, or using two copies of the same image will not reproduce the issue. Repro steps:
Again, this is pretty inconsistent and a bit tricky to repro. The specific window size seems to matter, so it may require some fiddling to get the problem to occur on your machine. See the video below for results. Example project: image_corruption_example.zip import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Corruption Demo',
home: Stack(
children: [
Image.asset('assets/dash.png'),
Image.asset('assets/logo.png'),
],
),
);
}
}Video: imageCorruption.mov |
|
I've tracked down the commit where the sample case starts breaking: 12271f8, which rolls the Flutter engine from flutter/engine@a6ce607b13f8 to flutter/engine@849877954bb4. @yjbanov, I notice that some changes for flutter/engine#30680 fall in this range. Is it possible this is related? EDIT: It looks like it may be more complicated than this. I'm not 100% confident about this commit being the breaking change. |
|
Hi @doppio, Thanks for filing the issue. I am not able to reproduce the issue on the latest master or the stable channel and it seems to work fine as expected. I even tried with the same screen dimensions as yours under developer tools and also by running with html and canvaskit renderer but could not reproduce it. Screen.Recording.2022-01-24.at.7.29.19.PM.movLet me know if I am missing anything. flutter doctor -vThanks |
maheshj01
added
the
waiting for customer response
|
Thanks for taking a look, @maheshmnj.
I just pushed a local build of the example ( |
github-actions
bot
removed
the
waiting for customer response
|
I've tried to make a reproducible dartpad without success today. I confirm I do not have the issue with your repro with channels master, beta and stable channels. Versions I tried: I'm running low on time so I won't put anymore time into this. |
|
@doppio I can reproduce it with your example in the production but not when running locally with the example shared above Screen.Recording.2022-01-25.at.11.08.00.AM.movflutter doctor -v |
|
@doppio, Would it be possible for you to try to recreate a reproducible case? Without an easily reproducible case, I am not sure if this issue can be actionable. |
maheshj01
added
the
waiting for customer response
|
@maheshmnj I personally did not try scrolling his repro, you did not either in the video you posted. It seems that in his last video it happens when he scrolls. In my case it also contains a I hope some reproduction is going to be found as this glitch is verry odd in UI |
|
I spent a few more hours on this today -- unfortunately, I'm still unable to come up with a simple case that reproduces the issue after building. I'm able to reproduce it quite easily locally ( It's also strange that I don't see the issue after building the example. Our real project does exhibit the issue after building, as demonstrated above. Maybe it has something to do with the quantity of content/image assets? I'm currently running:
The end result is a very poor user experience - we can't go to prod with this. 😞 It's starting to look like our solution will be to cobble together a private Flutter repo prior to 12271f8, along with a few other recent fixes we need from |
github-actions
bot
removed
the
waiting for customer response
|
It sounds like the same issue I came across a few days ago, image corruption with Canvaskit in a recent Flutter master starting a few weeks back and it shows as different red and black patterns. I haven't had a chance to come up with a repo for it yet outside of my main app, tricky as you say to isolate it. |
|
We also had a similar issue where images on resizes become black and red, though not in a "nice" gradient as shown above here, but rather crumbled: AgoraIO-Extensions/Agora-Flutter-SDK#521 Probably related, but sadly also just appearing occasionally and not strictly reproducible (but I would say 30-50% on resize with a video on top; likely this native view / stacking has something to do with it). |
|
@tp This looks like the same issue. In addition to the black/red gradient, we're seeing image artifacts that are very similar to the screenshots on that issue. We usually see one of three things:
It's interesting that the AgoraIO issue predates 12271f8, the commit that I had identified as the breaking change. |
|
in my case the red and black was looking like a moving sinuosidal. Which makes sens when you know my images all had a circular progress indicator on top of them. @tp did the glitch appear at all time or only once something was moving ? It seems like doppio needs the scroll to trigger the glitch too so it seems to indicate something. |
|
Scrolling does seem to help replicate the issue, but resizing the web browser can trigger it too. |
|
So I gather there needs to be something moving on top of the image. In my case it was the progress indicator, in yours it's another image. In @tp case, I'll take a wild guess and say he might have had a text transition. |
@doppio would it be possible for you to create a reproducible case? Since you are able to reproduce the issue. |
maheshj01
added
the
waiting for customer response
|
Working on it, as mentioned above. This is extremely difficult to pinpoint, and it's not clear why others aren't seeing the issue in the repro case I provided. But there's clearly a bug here that's affecting other developers, and it's affecting our thousands of daily users in production. It's a show-stopper for us, so we'll continue to investigate. Please don't just close this. It seems like the triage team is encouraged to close as many issues as possible, but others are still contributing useful information in identifying a more solid repro case. |
github-actions
bot
removed
the
waiting for customer response
Sure please write back with a reproduction code
The issue is only closed when there isn't enough info to make the issue actionable and it gets auto closed if there is no response from the author for 21 days. |
maheshj01
added
the
waiting for customer response
|
To confirm we are talking about the same thing, this is what I can produce in my app upon resizing the Window:
Okay up until: 2.6.0.11.0.pre.784 This seems to be the Commit: flutter doctor |
This seems triggered when "platform views" become active (the video streams), and when the browser is resized (sometimes resizing again also makes the issue go away, but that's 50/50). |
|
EDIT: I originally posted a repro case that was using a third-party package. Since then, I posted a simpler repro case without any plugins: #97103 (comment) Original repro case (with 3rd party package):
I've put together a simpler repro case that is still reproducing after `flutter build`. It still requires some fiddling with the window size and/or scrolling for it to occur.
Unfortunately, I've been unable to isolate this case from the third-party package Repro caseHosted here: https://flutterimagecorruptiondemo.web.app
import 'package:figma_squircle/figma_squircle.dart';
import 'package:flutter/material.dart';
Future<void> main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Positioned.fill(child: SomeShape()),
Image.asset('assets/1.jpg'),
],
),
Image.asset('assets/2.jpg'),
Image.asset('assets/3.jpg'),
Image.asset('assets/4.jpg'),
],
),
),
);
}
}
class SomeShape extends StatelessWidget {
const SomeShape({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: ShapeDecoration(
color: Colors.blue,
shape: SmoothRectangleBorder(
borderRadius: SmoothBorderRadius(
cornerRadius: 75,
cornerSmoothing: 0.8,
),
),
),
);
}
}Videorepro_case.movNotes
|
github-actions
bot
removed
the
waiting for customer response
|
Thanks for the sample project @doppio, I am able to reproduce the issue on the latest master channel. But this issue does not reproduce without the third party plugin, So I suspect if this could be due to the plugin Reproducible sample code can be found in the above comment. Logsmahesh@Maheshs-MacBook-Air-M1 image_corruption % flutter run -d chrome --web-renderer canvaskit
Running "flutter pub get" in image_corruption... 3.6s
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 28.8s
This app is linked to the debug service: ws://127.0.0.1:57666/aHhd2MYv9MA=/ws
Debug service listening on ws://127.0.0.1:57666/aHhd2MYv9MA=/ws
💪 Running with sound null safety 💪
🔥 To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:57666/aHhd2MYv9MA=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:57666/aHhd2MYv9MA=
Performing hot restart... 3.1s
Restarted application in 3,142ms.
Application finished.
flutter doctor -vcc: @yjbanov |
maheshj01
added
a: images
|
Thanks, @maheshmnj. I was actually just able to modify the repro case to replicate the issue without any third-party packages. Thanks to @cedvdb for the nudge in the right direction regarding progress indicators.
import 'package:flutter/material.dart';
Future<void> main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Image.asset('assets/1.jpg'),
Positioned.fill(child: CircularProgressIndicator()),
],
),
Image.asset('assets/2.jpg'),
Image.asset('assets/3.jpg'),
Image.asset('assets/4.jpg'),
],
),
),
);
}
}Download project: image_corruption.zip VideoimageCorruption.mov |
|
Hi @doppio great job on finding a simple repo! I confirm this on Windows, in particularly when rolling the mouse to zoom in and out. @maheshmnj I can see again that this repo is fine on 2.6.0.11.0.pre.784 and first appears in 2.6.0-12.0.pre.785 (924336f)
@andreidiaconu tagging you as the committer, any advice on this issue? |
|
That commit doesn't touch any canvaskit or image processing code. It only pipes some data from Android to the Framework through the Engine, so I'm really not sure how it might affect this issue. |
|
Hi @andreidiaconu, I realise my question wasn't well formed. You are right on the Flutter framework release there's only the pieces you mention. Behind that I started to look and I can see there were quite a few Engine revisions between those two Flutter framework commits but I realise they are not connected with the work you released. Framework Commits: My current line of sight is on this one: It appears that in 2.6.0-12.0.pre.785 (924336f) when I edit the new image_web_codecs.dart file (for some reason I have two of them in nested folders - I edited both) and disable the new image decoder the issue appears to go away.
In more recent versions of the Engine Framework the approach was further modified and there is now a environment variable for disabling the new ImageDecoder and using the CanvasKit WASM one:
So when I run the following on the sample repo (with the kittens) using 2.10.0-1.0.pre.326 the issue disappears Note: I found the code a little sticky changing back and forth, so I found --release and hitting F5 twice was very reliable. @doppio, @maheshmnj, @tp, @cedvdb does this flag work for you? flutter doctor[√] Flutter (Channel master, 2.10.0-1.0.pre.326, on Microsoft Windows [Version 10.0.17763.2452], locale en-IE) • Flutter version 2.10.0-1.0.pre.326 at C:\Code\flutter • Upstream repository /~https://github.com/flutter/flutter.git • Framework revision e5f9d5b (15 minutes ago), 2022-01-29 00:10:14 +0200 • Engine revision c2b6e13 • Dart version 2.17.0 (build 2.17.0-67.0.dev) • DevTools version 2.10.0-dev.1[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0) [√] Chrome - develop for the web [√] Android Studio (version 2020.3) [√] VS Code (version 1.63.2) [√] Connected device (2 available) [√] HTTP Host Availability • No issues found! |
|
Confirmed that this is reproducible with the example in #97103 (comment) This started with the migration to the web ImageDecoder API (flutter/engine@9258e0c) @yjbanov @kjlubick Possibly this could be an issue in |
|
@zambetpentru That flag works on my end! Thanks so much for investigating -- you saved the day for us! 🎉 |
|
Funny, I was just using Rive and encountered this bug in the wild! cc @luigi-rosso in case you're interested in a fix for this 🙂 |
First off thanks for your investigation @zambetpentru! I could still reproduce the issue for our app with a video showing on top:
(I ran with |
|
@tp When I read the original linked ticket AgoraIO/Agora-Flutter-SDK#521 i and I see Videos / Platform Views I think of my other ticket that is currently open #95259 - do you have any errors in the Browser Console? Have a go on 2.6.0.11.0.pre.784 (2ac39b9) and see if your issue disappears (this ticket) and if not drop back further to Interested to hear your update :-) |
|
@zambetpentru Would love to give this a try. What are the exact Git commits of the versions you mention though? I only see a single In the screenshot above the images don't "disappear" fully though, they still show that black/red gradient (it's only a bit hard to see in our dark mode). But still happy to try out if it's related to the other issue :) |
|
@maheshmnj I'd feel more comfortable if there was an integration test for this. I'm sure others too because the result is ugly |
|
I fixed one more issue with textures in CanvasKit at ToT which may be the culprit: skbug.com/12797 One symptom I noticed was the wrong texture would be drawn at spurious times. That should be fixed now in CanvasKit; hopefully we can update Flutter to use it soon. |
|
Confirmed that google/skia@c4b2fb3 fixes this |
|
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 |
Images are inconsistently, but frequently, becoming corrupted on web when using CanvasKit. It seems to happen when the content is scrolled or the window is resized. Below, you'll see an example of 3 images loaded in from assets in a Stack. The results usually appear correctly at first, but scrolling through the interface causes the images to "randomly" change their content. The incorrect contents always seem to be a stretched or highly-zoomed version of other images in memory.
I've only been able to reproduce this when using CanvasKit, but using the HTML renderer is not a viable workaround for us due to several other Flutter bugs.
I've been unable to reproduce this on the
betachannel but I see it often onmaster.Expected results:
Actual results:
I'm having some difficulty putting together a minimal repro case, but I'm working on it and hope to post one soon. I'm filing this issue in the meantime, in case this is a known issue or someone has some insight about what's going on here.
Logs
No warnings or exceptions are displayed at runtime.The text was updated successfully, but these errors were encountered: