Content is stretched when using canvaskit in Mobile Browsers #159974
Description
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
Code sample
main.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
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
(function () {
"use strict";
window._updateSize = function (target, width, height) {
let flutterTarget = document.querySelector('#' + target);
flutterTarget.style.height = height + 'px';
}
}());
Screenshots or Video
Screenshots / Video demonstration
streching-issue.mp4
Logs
Logs
No logsFlutter Doctor output
Doctor output
[!] 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.