Some effects fail on mobile web using the HTML renderer

[nietsmmar]

This issue already came up here but was closed.

Some of the animations I use on my app will make my widgets disappear when I use the web-app on mobile devices. It works on desktop devices though. I tested to build for desktop, and build for web and tested in desktop browsers Firefox/Chrome/Chromium/Safari. It works fine there.

But when opening the webapp on mobile devices, either on android-devices or ios-devices, some of the animations will make widgets go disappear.

For example I use .animate().shimmer().shake() on one of my images. This makes it go disappear. Also I've build a Container that is using moveX(). There the same happens. Interestingly on some rare occasions it works.

I have no idea, what is going wrong. But this is a major issue, hence I created a new one, as the old one was just closed.

I've used flutter version 3.7.5 for building.

[gskinner]

This sounds like a Flutter framework issue. We're not using any platform specific code in Animate, so it should "just work". Would you mind filing an issue against Flutter and link back to this issue from it?

Thanks in advance!

[nietsmmar]

I investigated further and it is only the shimmer effect that is making problems. The rest of the animations that I use work flawlessly. I don't know what to report to the Flutter framework. I have no idea how to describe the problem as it only happens with your package.

[gskinner]

Are you targeting html or canvaskit renderer? If you're using HTML, it may be due to this issue?
flutter/flutter#85140

[nietsmmar]

I am using default Renderer. And it only happens on mobile devices.

So when I understand correctly:

By default, both html and canvaskit will be packaged in Web release, and then the canvaskit mode will be used on the PC side and the html mode will be used on the mobile side.

(https://medium.com/@GSYTech/how-to-optimize-flutter-web-and-how-flutter-web-work-in-html-renderer-b399ffd66718)

this will use html renderer on my mobile devices. So yes...probably it is this issue. Thanks!

[gskinner]

I just did an audit in iOS Simulator, and the following effects do not render correctly using Flutter's HTML renderer, though all do partially render, they just exhibit issues (don't animate, display incorrectly, etc):

• BlurEffect
• ColorEffect
• SaturateEffect
• ShimmerEffect
• TintEffect

Also of note:

• FollowPathEffect: rotates in ~10deg increments
• ShaderEffect: doesn't work at all (expected)

I need to test on device, but thought I'd post the quick results here.

[gskinner]

Device testing on iOS, here's the effects that have trouble:

• FollowPathEffect: Still rotates in fixed increments.
• ShaderEffect: doesn't work (expected)
• ShimmerEffect: Target flickers, and shimmer runs backwards.

Everything else seems to work fine on device.

[lukasnevosad]

For anyone bumping into this, I just encountered the same issue, but using CanvasKit and ColorEffect. Renders correctly on iOS and Android, fails both in Chrome and Safari on MacOS.