Animations getting pixelated on Safari browser when using CanvasKit as web renderer

[hooshyar]

Rive animations on safari get pixelated when using canvas kit as a web renderer

Steps To Reproduce

Steps to reproduce the behavior: 1- have the rive animation on the project

Container(
     width: 450,
     height: 450,
     child: RiveAnimation.asset(
     assets/animations/finger.riv',
     antialiasing: true,
     fit: BoxFit.cover,
),

2- run flutter run -d chrome --web-renderer canvaskit 3- run the test URL on the safari browser

Source .riv/.rev file

finger.riv.zip

Expected behavior

Animation not to get pixelated on safari

Screenshots

Device & Versions

• Device: Safari Version 15.4 (17613.1.17.1.13) on mac m1
• OS: macOS Monterey
• Flutter Version: Flutter 3.0.0 • channel stable • https://github.com/flutter/flutter.git Framework • revision ee4e09cce0 (9 days ago) • 2022-05-09 16:45:18 -0700 Engine • revision d1b9a6938a Tools • Dart 2.17.0 • DevTools 2.12.2

Additional context

I see that the animations work perfectly with the HTML renderer, but I have to use canvas

[caudetgit]

@hooshyar Unfortunately, this is an issue with Safari 15.4 and WebGL 2 on an M1 mac. It appears that Safari 15.5 may have addressed this issue, but 15.5 was released 2 days ago and may not be available to all users yet.

https://github.com/flutter/flutter/issues/100265 https://bugs.chromium.org/p/skia/issues/detail?id=13123

[hooshyar]

@hooshyar Unfortunately, this is an issue with Safari 15.4 and WebGL 2 on an M1 mac. It appears that Safari 15.5 may have addressed this issue, but 15.5 was released 2 days ago and may not be available to all users yet.

flutter/flutter#100265 https://bugs.chromium.org/p/skia/issues/detail?id=13123

Yeah, it is specific to Safari, but not only M1, my iPhone 12 safari does more and less the same.

[caudetgit]

Good point. I believe that iOS 15.4 or 15.4.1 introduced this problem for mobile.

[omartinma]

I am getting a similar issue on Chrome as well, and when using HTML the issue is gone.

[hooshyar]

Any fix regarding this issue, I'm getting old and still not able to use Rive on flutter web because of this issue.

[caudetgit]

@hooshyar Please take a look at Safari 16.3 and let us know if you still see the issue. Thanks.

[HayesGordon]

I tested on an M1 Mac, Safari and Chrome, both HTML and CanvasKit and can confirm that it's rendering fine. It seems like this issue with Safari has been resolved. Please feel free to reopen if anyone encounters further difficulties. I also tested on an iPhone with Safari.

Safari: Version 16.2 Chrome: Version 109.0.5414.119

 Flutter (Channel stable, 3.7.3, on macOS 13.1 22C65 darwin-arm64

As for the opacity issue we will have a fix for that in the next release of the Flutter Rive runtime.

I'm closing this issue for now, but please reopen if you encounter additional issues.

Here is a deployed version for easy testing: https://iridescent-dusk-924298.netlify.app/#/

[jacobokoenig]

In my case, running on Chrome with the default run configuration, I see the assets in low definition (see even rive watermark). Has anyone else experienced this?

[✓] Flutter (Channel stable, 3.13.0, on macOS 14.0 23A344 darwin-arm64, locale en-GB)