[Web][iOS] Animation and SVG rendering issues

[RootSoft]

Thanks for this great package. I've been porting my app to Flutter web and have been having some animation and SVG rendering issues on Flutter Web on iOS.

Steps to Reproduce

1. Pull the sample repository
2. Execute flutter run -d web-server --web-renderer canvaskit --web-port 8080 --web-hostname 0.0.0.0 --release on the sample repository
3. Open up the simulator or physical iphone and open up safari/chrome
4. Navigate to http://{ip-address):8080
5. Fiddle around the app

Devices Issue tested & occurs on: Iphone SE 2020 - iOS 15.4 Simulator iPhone SE & 13 - iOS 15.4

Happens on both Chrome and Safari (webkit issue?)

No issues found on Chrome on Android, Chrome/Safari (15.1) on Mac

Expected results: App works like on Android or Flutter Web on Desktop.

Actual results: Janky behaviour, after some time all animations in the app stop working. svg icons disappearing and appearing again RefreshIndicator has some weird issues after some time, see the video below.

Additional notes:

When I remove the hero_icons package, (which has a dependency on flutter_svg) and use the flutter Icon and IconData class, the issue does not happen anymore hence why I think it's a flutter_svg problem. Note that I've also tried the latest master branch of flutter_svg with the same results. Icons can be found here.

Video example:

https://user-images.githubusercontent.com/7756836/163213449-b8208b19-392e-4f99-b9f9-cec12ff37da4.mov

Logs:

``` [✓] Flutter (Channel stable, 2.10.4, on macOS 12.0.1 21A559 darwin-arm, locale en-BE) • Flutter version 2.10.4 at /Users/tomas/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision c860cba910 (3 weeks ago), 2022-03-25 00:23:12 -0500 • Engine revision 57d3bac3dd • Dart version 2.16.2 • DevTools version 2.9.2 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/tomas/Library/Android/sdk • Platform android-31, build-tools 31.0.0 • Java binary at: /Applications/Android Studio 2.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer https://user-images.githubusercontent.com/7756836/163213017-6a0f8b79-5a6e-429c-914f-11334c8d4602.mov • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.1) • Android Studio at /Applications/Android Studio 2.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763) [✓] IntelliJ IDEA Community Edition (version 2021.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.66.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension can be installed from: 🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [✓] Connected device (2 available) • iPhone SE (3rd generation) (mobile) • 1BD476CB-B0F3-4A10-A20C-7E48F30E88F0 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 100.0.4896.75 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

Related issues

https://github.com/dnfield/flutter_svg/issues/603 https://github.com/dnfield/flutter_svg/issues/684

[tamasapps]

Same issue. Images flashing while scrolling and partly or completely disappearing.