Repository: flutter
Issue: Content is stretched when using canvaskit in Mobile Browsers
Labels: platform-web,e: web_canvaskit,has reproducible steps,P2,browser: chrome-android,e: web_skwasm,team-web,triaged-web,browser: chrome-ios,found in release: 3.24,found in release: 3.27

### Steps to reproduce

*This issue occurs specifically on Chrome mobile browsers.*

My setup involves an Angular project as the host application, containing a div element that embeds my Flutter web project. I aim to dynamically adjust the div container's height to achieve a proper website-like appearance and avoid multiple scrollings.

When using the HTML renderer, the view displays correctly. However, with the CanvasKit renderer, increasing the container's height beyond its default value causes the entire Flutter view to become stretched and blurred, resulting in the entire application appearing distorted.

As shown in the attached video, you can see that scrolling is also not possible once the content becomes stretched.

Note: This behavior has been observed on both Flutter stable and Flutter master channels.

You can find the Angular host app code at https://github.com/creatorpiyush/flutter-component-host. To test, create a web build using the command `flutter build web --web-renderer=canvaskit` with the provided Flutter code. Then, copy the `web` folder from the build directory into the assets folder of the host app repository.

### Expected results

The view should maintain its proportions and not become stretched when dynamically adjusting the height using the CanvasKit renderer.

### Actual results

The view is fully stretched, with its top portion obscured by the header, and scrolling is not possible.

### Code sample

<details open><summary>Code sample</summary>

main.dart
```dart
import 'package:dummy_app/js_interop_check.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: ((context, index) => GestureDetector(
                onTap: () => updateHeight("flutter_host", 500.0, 1700.0),
                child: Container(
                  color: Colors.amber,
                  child: const SizedBox(
                    height: 20,
                    width: 100,
                    child: Text("Click here"),
                  ),
                ),
              )),
        ),
      ),
    );
  }
}
```

js_interop_check.dart
```dart
import 'dart:js_interop';

@JS("_updateSize")
external void _updateSize(String target, double width, double height);

void updateHeight(String target, double width, double height) {
  _updateSize(target, width, height);
}
```

web/js/js-interop.js
```javascipt
(function () {
  "use strict";

  window._updateSize = function (target, width, height) {
    let flutterTarget = document.querySelector('#' + target);
    flutterTarget.style.height = height + 'px';
  }

}());
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

https://github.com/user-attachments/assets/0b8e5383-3227-46b8-b6f0-5b5baaeae232

</details>


### Logs

<details open><summary>Logs</summary>

```console
No logs
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[!] Flutter (Channel [user-branch], 3.24.5, on macOS 15.1.1 24B91 darwin-arm64, locale en-IN)
    ! Flutter version 3.24.5 on channel [user-branch] at /Users/piyushanand/flutterSDK/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision dec2ee5c1f (4 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks
      and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/piyushanand/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • ANDROID_HOME = /Users/piyushanand/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available)
    • iPhone 15 Pro Max (mobile)      • B3A4ADC3-6E1B-44CD-AE31-8FA4F307CDDE • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-5
      (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.1.1 24B91 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.1.1 24B91 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 131.0.6778.109
    ! Error: Browsing on the local area network for Piyush’s iPhone. Ensure the device is unlocked and attached with a cable or associated with
      the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>