Skip to content

Application does not redraw on Chrome <= 110 #146431

Closed
@Frank3K

Description

@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.
  1. When we disable the check on ChromeOS (by manually editing main.dart.js), our application works again as expected.
  2. 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.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    browser: chrome-desktoponly manifests in desktop Chromec: renderingUI glitches reported at the engine/skia or impeller rendering levelplatform-webWeb applications specificallyteam-webOwned by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions