[Web] [CanvasKit] [DomCaanvas] Regression on Master and Dev channels during Theme changes when using AnimatedCrossFade

[rydmike]

Steps to Reproduce

The issue described below has been observed on master channel starting from 1.22.0-2.0.pre.140 for Web CanvasKit builds, but it may exists already from version 1.21.0-8.0.pre.168 if its cause is related to the root cause behind issue #63740.

Update: 8.9.2020: The issue is also present on Web DomCanvas, but only with release build, not with debug builds. The issue has also now been verified to exist on dev channel as well (Channel dev, 1.22.0-9.0.pre) for both DomCanvas and CanvasKit builds in release mode.

Observed issues:

1. When switching theme mode a number of times, typically 3 to 15 the behavior of AnimatedCrossFade widget changes.

2. The root regression cause of this issue is potentially related to Regression in AnimatedContainer behavior on CanvasKit and DomCanvas Web builds on master and dev channel release builds #63740. This is just a hunch, based on that the issue is equally odd and related to using an implicit animated widget and it not being able to handle theme change animations correctly. In this case it is however another implicit animated widget, the AnimatedCrossFade, that is impacted. In case Regression in AnimatedContainer behavior on CanvasKit and DomCanvas Web builds on master and dev channel release builds #63740 it is the AnimatedContainer.

3. This issue is not present in Beta channel (release or debug) builds with CanvasKit or DomCanvas.

4. This issue is present on Master channel with release builds with CanvasKit and DomCanvas.

5. This issue is present on Dev channel with release builds with CanvasKit and DomCanvas.

All web versions demonstrated here were built using:

flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_SKIA=true --dart- 
define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Source code for the issue demo app:

The code for the issue demo is available here:
https://gist.github.com/rydmike/2a3efd05ba677fe98f65771c4e1fa62e

Expected results - OK on Beta channel

When building the issue demo with channel Channel beta, 1.21.0-9.1.pre we cannot observe the issue.

A pre-built demo of the version built with WEB beta can be found here:
https://rydmike.github.io/animatedcrossfadebeta/#/

In the demo the mock user profile in the menu uses an AnimatedCrossFade widget as an expandable widget by cross fading between two states depending on if it is in opened or closed state.

As we toggle the theme we expect it to just change the theme and not do anything else:

In the build on Beta channel that is also so, thus it works as expected.

Actual failed results - Regression on Master

When building the same issue demo app for Web with Channel master, 1.22.0-2.0.pre.140.
We can observe how the AnimatedCrossFade changes behavior as we click on the theme toggle switch a few times.

With the first few theme switch clicks, we can typically just see an extra background color flash during the theme change, which is already an issue. Then after a few clicks the text in the CircleAvatar starts to get the wrong theme color after theme changes. As the last change in behavior we observe how the AnimatedCrossFade widget starts to expand and push down the menu items during the theme change animation.

All three observations are a regression master channel for Web builds. The root cause is probably the same, it seem like it accumulates somehow and brakes down further as the theme switch is used.

This GIF screen recording demonstrates the issue:

A live version of the build made on master with version Channel master, 1.22.0-2.0.pre.140, can be tried here:
https://rydmike.github.io/animatedcrossfademaster/#/

Dart pad version - OK

This demo can also be run on DartPad, it is slow, but like the Beta SKIA build, it does not have the issue:
https://www.dartpad.dev/2a3efd05ba677fe98f65771c4e1fa62e

Desktop - master channel - OK

This regression cannot be observed on desktop builds on master channel even though it is present on master channel when building for Web targets that use CanvasKit (SKIA) and DomCanvas .

Conclusion based on findings

The presented issue and regression is present on Web release builds for CanvasKit and DomCanvas builds on master and dev channel, but is not present on:

1. Desktop and device builds on master channel
2. Web DomCanvas and CanvasKit release and debug builds on beta channel 1.21.0-9.1.pre

Based on the above constraints, my conclusion is that the cause of this regression might be related to some Web change/optimization done after current beta release. So it seems at least based on where the issue can be observed. I think this same conclusion also applies to issue #63740.

Flutter Doctor

``` flutter doctor -v [√] Flutter (Channel master, 1.22.0-2.0.pre.140, on Microsoft Windows [Version 10.0.18363.959], locale en-US) • Flutter version 1.22.0-2.0.pre.140 at C:\Users\mryds\fvm\versions\master • Framework revision 6d1242d (9 hours ago), 2020-08-31 03:53:04 -0400 • Engine revision 784e6d7 • Dart version 2.10.0 (build 2.10.0-76.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
• Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
• Platform android-29, build-tools 29.0.1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.5)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.6.30320.27
• Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.0)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 47.1.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2019.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
• Flutter plugin version 35.3.3
• Dart plugin version 192.7402

[√] VS Code (version 1.48.2)
• VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.13.2

[√] Connected device (5 available)
• Nexus 7 (mobile) • 0a99f5e8 • android-arm • Android 6.0.1 (API 23)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.959]
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 84.0.4147.135
• Edge (web) • edge • web-javascript • Microsoft Edge 85.0.564.41

• No issues found!

</details>

[rydmike]

@mariamhas for info, I'll drop you a mail about it as well.
I reported this as a new issue, but I suspect that this issue might share the same root cause as the regression reported in #63740, it might not. In either case this report might help with finding the cause from another angle.

[rydmike]

Since there was an additional report and finding regarding issue #63740 that it also occurs with DomCanvas when using release builds, which I also verified, I decided to check if the same applies to this issue as well.

---

Update

The findings were the same. This issue, contrary to my previous report, also occurs when using DomCanvas, but only in release mode builds, not on debug builds. I had previously only tested DomCanvas builds in debug mode.

Furthermore this regression also exist on Channel dev, 1.22.0-9.0.pre. Earlier I only tested master and beta, so most likely it existed before on dev channel as well.

As before the regression is not yet present on current beta channel 1.21.0-9.2.pre.

I updated the heading and some other comments to reflect this additional info.

I still suspect that root cause of this regression and issue is strongly related to #63740. It would be very unfortunate if this regression, slips into the next beta release. It least for us it breaks functionality on web builds that currently works on beta, but not on dev and master,

cc: @mariamhas @yjbanov

[rydmike]

I just double checked and verified that it is the --release mode Web builds that are effected, DomCanvas or CanvasKit both have the issue and it happens on current master and dev channels.

I also verified that if you use --debug build for master or dev channels you do not see this issue, although I think it is partially there, the error situation might just be better handled in debug mode. In debug mode builds there is no error or log in Flutter console nor in Chrome browser web dev tools.

However, in --release mode in Chrome web dev tools you do get this JS error:
Another exception was thrown: Instance of 'minified:dl<void>' js_primitives.dart:47

This error does not occur with beta channel release mode builds.

---

The exact same findings apply to #63740.

[rydmike]

The fix dart-lang/sdk#43366 landed via dart-lang/sdk#43413 was observed to solve the reported issue on web --release builds with Flutter Channel master, 1.22.0-10.0.pre.172.

As suspected in the report, the root cause of this issue was the same as for issue #63740 so the same fix resolved this issue too, this was verified with the original issue sample.

Closing the issue. Thanks for the fix! 😃 👍

[github-actions]

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 flutter doctor -v and a minimal reproduction of the issue.