Description
Steps to reproduce
- Open a Flutter application on Chrome <= 110. For example using browserling: https://www.browserling.com/browse/win10/chrome110/https://dartpad.dev/.
- Set channel to main.
- Open the Counter example.
- Click on Run.
- Observe that the loader starts spinning.
- Observe that the loader stops spinning (incorrect).
- 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:
- The bug is a regression in Flutter 3.19; it did not occur in 3.16.
- 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.
- When we disable the check on ChromeOS (by manually editing
main.dart.js
), our application works again as expected. - 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.
- 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.