Skip to content

[MacOS][Web] The scrolling performance degradation #123204

@Tamilarasan-Paranthaman

Description

The scrolling performance on the MacOS Web platform was degrading.

Steps to Reproduce

  1. Run the sample in the Web platform on MacOS.
  2. Scroll the sample in vertical direction.

Expected results: The scrolling performance needs to be smoother.

Actual results: The scrolling performance was lack of smoothness.

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(const FlutterDemo());
}

class FlutterDemo extends StatelessWidget {
  const FlutterDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: _FlutteDemo(),
    );
  }
}

class _FlutteDemo extends StatefulWidget {
  const _FlutteDemo();

  @override
  State<_FlutteDemo> createState() => _FlutteDemoState();
}

class _FlutteDemoState extends State<_FlutteDemo> {
  List<Widget> widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 200; i++) {
      widgets.add(Container(
        height: 50,
        width: 70,
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        child: Text(i.toString()),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Flutter Sample')),
        body: SingleChildScrollView(
          child: Row(
            children: [
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
              Column(children: widgets),
            ],
          ),
        ));
  }
}
Logs
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-x64, locale en-GB)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location. [✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.75.1)
[✓] VS Code (version 1.76.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability 

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work listc: performanceRelates to speed or footprint issues (see "perf:" labels)e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.f: scrollingViewports, list views, slivers, etc.found in release: 3.7Found to occur in 3.7found in release: 3.9Found to occur in 3.9has reproducible stepsThe issue has been confirmed reproducible and is ready to work onperf: speedPerformance issues related to (mostly rendering) speedplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions