Web: scrolling behaviour on Mac does not match platform

[tomgilder]

Scrolling behaviour on Flutter web doesn't match the native HTML scrolling behaviour on Mac, especially on Safari. The speed is significantly too slow, and there's no over-scroll bouncing effect.

Note that I'm not referring to performance: even at 60fps, the behaviour doesn't feel right.

For me, this is the currently the biggest fidelity issue with Flutter web apps. Scrolling feels really slow, sluggish, and just a bit wrong.

Here's a simple repo that shows a Flutter scrollview side-by-side with a native HTML one:

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  ui.platformViewRegistry.registerViewFactory(
    'html-scroll',
    (viewId) => DivElement()
      ..style.overflow = 'scroll'
      ..onWheel.listen((e) => e.stopPropagation())
      ..children = List.generate(
        100,
        (i) => DivElement()
          ..text = 'Native HTML text'
          ..style.padding = '20px'
          ..style.fontSize = '14px'
          ..style.color = 'black',
      ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Expanded(
              child: Scrollbar(
                child: ListView(
                  children: List.generate(
                    100,
                    (i) => Padding(
                      padding: const EdgeInsets.all(20),
                      child: Text('Flutter text'),
                    ),
                  ),
                ),
              ),
            ),
            Expanded(child: HtmlElementView(viewType: 'html-scroll'))
          ],
        ),
      ),
    );
  }
}

(note: VS Code will complain this won't compile, but it will run on Chrome after clicking "Debug Anyway")

On the native web site, I can get to the bottom of the native scrollview with one two-finger trackpad swipe, and I get a slight bounce at the end.

On the Flutter side, I can only get half way down, and it takes more swipes to get to the end:

scrolling.mov

Logs

[✓] Flutter (Channel beta, 1.26.0-17.4.pre, on macOS 11.2 20D64 darwin-x64, locale en-FI)
    • Flutter version 1.26.0-17.4.pre at /Users/tom/fvm/versions/beta
    • Framework revision 48c9d3e0e1 (20 hours ago), 2021-02-10 11:46:09 -0800
    • Engine revision 2c527d6c7e
    • Dart version 2.12.0 (build 2.12.0-259.8.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tom/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tom/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.53.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.19.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

• No issues found!

[darshankawar]

Issue replicable using latest master on chrome and safari.

75850.mov

flutter doctor -v

[✓] Flutter (Channel master, 1.27.0-2.0.pre.77, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.27.0-2.0.pre.77 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 9296a527b3 (5 hours ago), 2021-02-11 18:33:24 -0800
    • Engine revision cdc49c575b
    • Dart version 2.13.0 (build 2.13.0-25.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • 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
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.53.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (3 available)
    • SM G975F (mobile) • RZ8M802WY0X • android-arm64  • Android 10 (API 29)
    • macOS (desktop)   • macos       • darwin-x64     • Mac OS X 10.15.4
      19E2269 darwin-x64
    • Chrome (web)      • chrome      • web-javascript • Google Chrome
      88.0.4324.150

! Doctor found issues in 1 category.

[stuartmorgan-g]

Lack of overscroll is due to #23604

[nilsreichardt]

Specially on mobile devices is it noticeable. You can try it out with your phone and our website: https://sharezone.net

[yjbanov]

Thanks for providing a repro case.

[kf6gpe]

As the original comment notes, this isn't so much about speed as it is fidelity; I'm dropping the speed label as part of cleanup and adding fidelity.