Web: scrolling behaviour on Mac does not match platform #75850
Description
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!