Repository: flutter
Issue: Flutter Web Renderer : Canvaskit had issues on bigger screen sizes (5120x2880) in Chrome Web Browser
Labels: engine,platform-web,e: web_canvaskit,has reproducible steps,P2,team-web,triaged-web,found in release: 3.19,found in release: 3.21

### Steps to reproduce

1. Use web renderer Canvaskit (default renderer)
2. then try to open your flutter app on chrome
3. if you are not on a big screen desktop/laptop you can still generate it by going to inspect mode and set the screen size to 5120x2880 then the screen will to blank

**NOTE : it only happens when the web renderer is set to Canvaskit**

### Expected results

The page should get loaded properly on bigger screens.

### Actual results

Page gets cut when it is open in a bigger screen (in chrome)

### Code sample

<details open><summary>Code sample</summary>

```dart
// Flutter app scaffold body code segment
Container(
     color: Colors.red,
),
```
```
// Code inside web/index.html
 <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script> 
or 
 <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine({renderer: 'canvaskit'}).then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

https://github.com/flutter/flutter/assets/98372124/7e513849-aa91-44d4-bae8-962923c1de83

</details>



### Logs

<details open><summary>Logs</summary>

```console
Warning when the issue occurrs
fca @ js?key=AIzaSyAA2TYlKeuEMFfdEH8d2-qzT8rSRiASyvY:218
google.maps.Load @ js?key=AIzaSyAA2TYlKeuEMFfdEH8d2-qzT8rSRiASyvY:14
(anonymous) @ js?key=AIzaSyAA2TYlKeuEMFfdEH8d2-qzT8rSRiASyvY:389
(anonymous) @ js?key=AIzaSyAA2TYlKeuEMFfdEH8d2-qzT8rSRiASyvY:389
flutter.js:3 Exception while loading service worker: Error: prepareServiceWorker took more than 4000ms to resolve. Moving on.
    at flutter.js:1:336
(anonymous) @ flutter.js:3
Promise.catch (async)
loadEntrypoint @ flutter.js:3
(anonymous) @ doctors:54
load (async)
(anonymous) @ doctors:52
22WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode
canvaskit.js:129 WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode
(anonymous) @ canvaskit.js:129
kd @ canvaskit.js:129
jd @ canvaskit.js:128
fa @ canvaskit.js:127
a.GetWebGLContext @ canvaskit.js:14
asy @ main.dart.js:69074
bff @ main.dart.js:69003
(anonymous) @ main.dart.js:68685
(anonymous) @ main.dart.js:6940
$2 @ main.dart.js:81583
q @ main.dart.js:6926
bnN @ main.dart.js:68700
L5 @ main.dart.js:68678
(anonymous) @ main.dart.js:68861
(anonymous) @ main.dart.js:6940
$2 @ main.dart.js:81583
q @ main.dart.js:6926
bw5 @ main.dart.js:68864
BC @ main.dart.js:68853
(anonymous) @ main.dart.js:74779
(anonymous) @ main.dart.js:6940
$2 @ main.dart.js:81583

// Error in between
Shader compilation error
canvaskit.js:170------------------------
canvaskit.js:170 1 #version 300 es
canvaskit.js:170 2
canvaskit.js:170 3 precision mediump float;
canvaskit.js:170 4 precision mediump sampler2D;
canvaskit.js:170 5 out mediump vec4 sk_FragColor;
canvaskit.js:170 6 uniform sampler2D uTextureSampler_0_S0;
canvaskit.js:170 7 in highp vec2 vlocalCoord_S0;
canvaskit.js:170 8 void main() {
canvaskit.js:170 9 mediump vec4 outputColor_S0 = vec4(1.0);
canvaskit.js:170 10 highp vec2 texCoord = vlocalCoord_S0;
canvaskit.js:170 11 outputColor_S0 = texture(uTextureSampler_0_S0, texCoord, -0.475);
canvaskit.js:170 12 {
canvaskit.js:170 13 sk_FragColor = outputColor_S0;
canvaskit.js:170 14 }
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[√] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.22631.3235], locale en-IN)
    • Flutter version 3.19.3 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (5 days ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\rudra\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2023.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)

[√] VS Code (version 1.87.1)
    • VS Code at C:\Users\rudra\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.84.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3235]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 122.0.6261.112
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 121.0.2277.112

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>