Artifacts after update to 1.17

[AtixD]

https://github.com/flutter/flutter/issues/57959

[jonas-zebari]

To add to this, I am also experiencing this exact artifacting on iOS devices after upgrading Flutter to 1.17. All pre-existing animations with ellipses were affected. I feel like this is probably related to Flutter 1.17 moving to Metal from OpenGL?

[umberto-sonnino]

Thanks for the report! Could you provide an example Rive file for us to test?

[AtixD]

@umberto-sonnino Please note, You can see this bug only on real iOS devices. Thanks. Recorder.flr.zip

[umberto-sonnino]

So we've taken a look at this, and we can see the artifacts too -- but only while drawing paths on Flutter Stable. In fact, running that same file on the Flutter Dev channel it draws fine.

[nt4f04uNd]

@umberto-sonnino can confirm the precense of the artifacts on the current master head. One thing for you to note: artifacts are gone without antialias.

This actually kinda needs severe fixing.

Animation a tested with: https://rive.app/a/nt4f04und/files/flare/play-pause/preview

See videos:

• Artifacts
• Artifacts are gone with disabled antialias

[umberto-sonnino]

Would you mind providing a repro? I tried running the code from this flutter issue - which was highlighting the issue back in July - on the latest master and stable, but cubics seem to be drawing correctly now.

[nt4f04uNd]

@umberto-sonnino can you please try and run my animation, not the code from the issue. I'm sorry, I don't have enough time to make the repro, but could you just run my animation with the given sizes like on the video. If you won't get any artifacts, I will try and make the reproduction.

Thanks in advance for understanding.

[umberto-sonnino]

I've run your file locally on an iPad Mini with the latest Flutter master, and this is what I see:

There's a slight deformation defect on the bottom oblique line on the Play button. Is that what you've encountered? I couldn't really tell from your videos.

[nt4f04uNd]

@umberto-sonnino re-read my comment and rewatch the video I attached. artifacts occur with only specific small sizes of the animation canvas. constrain it to for example 20 pixels and check what happens

i encountered jagged, triangle shapes round the bars when animation was playing

[nt4f04uNd]

@umberto-sonnino how it should look (and looks properly without anti-aliasing) vs how it actually looks with anti-aliasing all static, when it is moving, the artifact shapes move around and change too

[nt4f04uNd]

@umberto-sonnino any updates?

[umberto-sonnino]

@nt4f04uNd I was able to reproduce the issue with the steps you mentioned, but not isolate it yet! I'm hoping to do that in the next few days

[nt4f04uNd]

@umberto-sonnino will this be fixed? I have an application to release and I will have to do that with this bug if this isn't adressed in the next few days

[umberto-sonnino]

Hey @nt4f04uNd, I've finally isolated the issue, and this might be related to a number of causes: turning on antialiasing, applying a transform with non-uniform scaling, using a big stroke, and rendering the shape in a small space, like your 35x35 container above.

A first workaround you could try is to deform vertices to obtain the same effect, instead of using big stroke values in your animations. Another workaround, since this happens only at small dimensions, would be to turn off AA for these smaller shapes since they'd be less affected visually by jagged edges.

I'll also report this back to the Flutter team to see if there's anything that can be done.

[nt4f04uNd]

@umberto-sonnino LOL the solution was so simple you can't even imagine. I just changed stroke join to be rounded, can't believe that worked. That behaviour (with other join options as I had initially) is still a bug I guess, as it shouldn't produce such weird shapes.