Application does not redraw on Chrome <= 110

[Frank3K]

Steps to reproduce

1. Open a Flutter application on Chrome <= 110. For example using browserling: https://www.browserling.com/browse/win10/chrome110/https://dartpad.dev/.
2. Set channel to main.
3. Open the Counter example.
4. Click on Run.
5. Observe that the loader starts spinning.
6. Observe that the loader stops spinning (incorrect).
7. Observe that the application re-draws when the browser size changes.

Expected results

The application redraws when needed. The loader should be hidden when the application is done loading.

Actual results

We have multiple clients that are complaining that our application does not work on "older Chromebooks". We have tracked down the issue and it seems that many of the old Chromebooks can not update beyond Chrome 103.

Our investigation found that:

1. The bug is a regression in Flutter 3.19; it did not occur in 3.16.
2. The culprit is very likely a result of [canvaskit] Disable createImageBitmap support on Chrome 110 or older on Windows. engine#48475 and [canvaskit] Revert to drawImage rendering on Chrome 110 or earlier engine#48515, created by @harryterkelsen.

• The first PR has the result that createImageBitmap is not used, but the older drawImage is used instead. This fix was for a reported issue on Chrome <= 110 on Windows.
• The latter PR drops the Windows-condition since there have been reports on other platforms. It is unclear to us which platforms.

3. When we disable the check on ChromeOS (by manually editing main.dart.js), our application works again as expected.
4. While we encountered the issue on real hardware on Chromebooks, we get the impression (based on the browserling demo) that it also occurs on Windows 10.
5. If you overwrite the userAgent (using the Chrome developer tools), to for example Chrome 123, the issue does not occur anymore.

We are willing to help on a PR, but we lack information on the situation of the original upside-down issue (#138827). We also doubt if the chosen work-around (from the linked PRs) is the best option. If it is possible to detect when the upside-down issue occurs, it might be better to keep on using createImageBitmap and pass the flipY option.

Code sample

https://dartpad.dev/?sample=counter&channel=master, but only on Chrome <= 110.

Screenshots or Video

Screenshots / Video demonstration

Recording on actual hardware (Lenovo N23 Chromebook, ChromeOS 103.0.5060.132)

Screen.recording.2024-04-08.13.56.12.webm

Browserling video recording on Windows 10.

Screen.Recording.2024-04-08.at.16.10.26-clip.mov

Logs

Logs

N/A as dartpad example is provided.

Flutter Doctor output

Doctor output

N/A as dartpad example is provided.

[danagbemava-nc]

Hi @Frank3K, do you only experience this in dart-pad? I tested a spinner example on chrome 110 running on ubuntu and it seems to work fine for me. I'm trying to get a lower version of chrome to test as well.

Screencast.from.04-09-2024.08.14.07.AM.webm

[Frank3K]

This is not only using the dart-pad example; multiple users of our production application reported the issue on Chrome 103 on ChromeOS.

Please note that we have patched the issue (as described in the original post); unfortunately some users (on Chrome 93 on ChromeOS) are now reporting that the application is upside down (as described in the original issue). For some other users the issue is solved. We are further investigating this.

[danagbemava-nc]

Regarding chrome 93, it seems it is not supported by flutter for deployment. See https://docs.flutter.dev/reference/supported-platforms

We are further investigating this.

Please keep us updated. I'll also try to get chrome 103 to see if I can reproduce this issue

[Frank3K]

Regarding chrome 93, it seems it is not supported by flutter for deployment. See https://docs.flutter.dev/reference/supported-platforms

We are aware of this. We just wanted to be complete. Note that the reported issue (application does not redraw) is mostly reported on Chrome 103.

We are further investigating this.

Please keep us updated. I'll also try to get chrome 103 to see if I can reproduce this issue

Thanks.

[Frank3K]

@talski Since you're the reporter of the original issue (#138827); we're wondering if you also receive reports of your application being stuck on Chrome <= 110.

[talski]

@Frank3K I got no more reports since then

[danagbemava-nc]

Hi @Frank3K, I managed to get chrome 103 but the spinner code sample seems to work as expected. Curious, in your application, do you use the canvaskit renderer or the html renderer? Dartpad is built with the canvaskit renderer so I'm trying to figure out if this is an issue with that renderer specifically. If you could also provide a complete minimal flutter code sample that reproduces the issue, that would be appreciated.

Thank you

Screencast.from.04-11-2024.06.24.21.AM.webm

[Frank3K]

Hi @danagbemava-nc. Thanks for your investigation. To answer your questions:

1. We do use (forced) canvaskit. We build using --web-renderer canvaskit.
2. The issue can be reproduced on Chrome 110 using the browserling example provided in the original post. We can also reproduce it on actual hardware (Lenovo N23 Chromebook) using Chrome 103.

[danagbemava-nc]

I do see the same issue when I open dartpad with chrome 103 & 110 but not on newer versions of chrome. With dartpad, you can also notice that the dropdown doesn't disappear when the code sample is selected.

Labeling for further investigation.

Similar to #138827

Screencast.from.04-12-2024.06.49.17.AM.webm

[Frank3K]

I do see the same issue when I open dartpad with chrome 103 & 110 but not on newer versions of chrome.

That's true. That's because a work-around has been introduced in flutter/engine#48515 and flutter/engine#48475 that specifically checks if the target browser is Chrome <= 110.

With dartpad, you can also notice that the dropdown doesn't disappear when the code sample is selected.

Nice observation. That could also be a missing re-draw.

[yjbanov]

Moving to dart-lang/dart-pad#2958

[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.