Web: scrolling behaviour on Mac does not match platform #75850

tomgilder · 2021-02-11T16:03:21Z

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!

The text was updated successfully, but these errors were encountered:

darshankawar · 2021-02-12T08:08:58Z

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 · 2021-02-12T10:55:20Z

Lack of overscroll is due to #23604

nilsreichardt · 2021-02-12T13:44:28Z

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

yjbanov · 2021-02-18T23:08:14Z

Thanks for providing a repro case.

kf6gpe · 2021-02-25T19:08:38Z

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.

Ajmaljalal · 2021-03-05T21:43:10Z

Still have this issue on mobile browsers

iapicca · 2021-10-09T08:23:28Z

@TahaTesser could you consider the label crowd for this issue?

tomgilder · 2022-02-23T09:29:28Z

This seems to be much better on Flutter 2.10 🎉

The physics aren't exactly right, but it doesn't feel really laggy anymore, thanks Flutter team ❤️

Not sure if we should leave this open as the physics are still a bit off?

huycozy · 2022-04-29T09:20:34Z

It seems much better now on latest stable and master channel (Let's take a look on demo video below)
But the problem is more visible on Safari than Chrome.

Demo - Chrome

chrome.mov

Demo - Safari

safari.mov

I also tested with ListView.builder and more number of elements in list:

Actual Result: In general, it is better with trackpad and mouse. But if we scroll by holding on scrollbar, it will be laggy

Demo - 1000 elements

chrome_1000.mov

flutter doctor -v

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 2.10.5 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (11 days ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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)

[✓] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio Preview.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 11.0.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

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

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 2.13.0-0.0.pre.808, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 2.13.0-0.0.pre.808 at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2eed8cbf93 (4 hours ago), 2022-04-28 22:29:06 -0400
    • Engine revision dfdfe0b3b0
    • Dart version 2.18.0 (build 2.18.0-66.0.dev)
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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)

[!] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

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

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

Patrick386 · 2022-04-30T11:09:02Z

flutter web & desktop scroll:
It's not very natural, especially if it's a list with images.

flutter doctor -v

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3.1 21E258 darwin-arm, locale ko-KR)
    • Flutter version 2.10.5 at /Users/patrick386/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 days ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/patrick386/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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 11.0.11+0-b60-7772763)

[✓] Connected device (3 available)
    • Patrick iPhone (mobile) • cb7347c121263eb6f964bb0927819a5c9c1a3645 • ios            • iOS 15.4.1 19E258
    • macOS (desktop)         • macos                                    • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)            • chrome                                   • web-javascript • Google Chrome 100.0.4896.127
    ! Error: Patrick iPhone is busy: Fetching debug symbols for Patrick iPhone. Xcode will continue when Patrick iPhone is finished. (code -10)

[✓] HTTP Host Availability
    • All required HTTP hosts are available

tomgilder · 2022-07-29T23:19:32Z

👀

#108298

Not sure if that will fix this?

moffatman · 2022-08-02T13:28:23Z

It won't be possible to have great trackpad scrolling on flutter web on any platform, we can't have overscrolling since the web browser doesn't tell the web application when the user has lifted their fingers from the trackpad. But probably the rate of speed could be adjusted. Although my PR #108298 is only meant for flutter desktop on mac, and will actually reduce the amount of scrolling compared to before, it won't fix this issue.

knopp · 2022-08-15T17:54:52Z

The scrolling in Safari seems significantly slower than Chrome. To the point where it makes the app feel sluggish even though the scrolling is actually pretty smooth (once shader jank resolves...). I think just tweaking the speed on Safari to match Chrome behavior would be a significant improvement.

knopp · 2022-08-16T11:08:12Z

It won't be possible to have great trackpad scrolling on flutter web on any platform, we can't have overscrolling since the web browser doesn't tell the web application when the user has lifted their fingers from the trackpad. But probably the rate of speed could be adjusted. Although my PR #108298 is only meant for flutter desktop on mac, and will actually reduce the amount of scrolling compared to before, it won't fix this issue.

On macOS there is a scrollWheel: event with 0dx/dy generated on lift. Sadly as far as I can tell this isn't passed through on Chrome or Safari.

knopp · 2022-08-16T11:23:41Z

Upon more experimentation I found out that scrolling speed of Safari matches the one in Chrome on screens with devicePixelRatio = 1. So it seems that on Safari we need to multiple the touch event pixel delta by devicePixelRatio in order to get consistent result across browsers.

This makes it consistent with Chrome and partially fixes flutter/flutter#75850

knopp · 2022-08-16T14:28:15Z

@tomgilder, the linked PR should fix the scroll speed issue on macOS Safari and Firefox. I just tried it with your example and both sides scroll same. Overscroll is bigger problem given the lack of touch lift notification. That said I noticed that on some web-sites (including when running your example) Safari only overscrolls when going ballistic, it doesn't overscroll on drag. While not ideal this still feels better than abrupt stop at the edge and should be doable with flutter-web.

github-actions · 2022-10-14T05:27:20Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

yjbanov added the P2 Important issues not at the top of the work list label Feb 18, 2021

kf6gpe added a: fidelity Matching the OEM platforms better and removed perf: speed Performance issues related to (mostly rendering) speed labels Feb 25, 2021

nilsreichardt mentioned this issue Mar 2, 2021

Scrolling Flutter Web App on mobile chrome is extremely slow and laggy #56257

Closed

guidezpl mentioned this issue Mar 4, 2021

Scroll too slow on Firefox flutter/gallery#450

Closed

darshankawar mentioned this issue Mar 12, 2021

Idea: match platform scrolling behavior with Flutter using HTML scrollable area #77883

Open

CodemateTechAgency mentioned this issue Apr 12, 2021

DevTools usability and design review flutter/devtools#2890

Open

darshankawar added the customer: crowd Affects or could affect many people, though not necessarily a specific customer. label Oct 11, 2021

huycozy added found in release: 2.10 Found to occur in 2.10 found in release: 2.13 Found to occur in 2.13 platform-mac Building on or for macOS specifically and removed found in release: 1.27 Found to occur in 1.27 labels Apr 29, 2022

knopp added a commit to knopp/engine that referenced this issue Aug 16, 2022

Convert Safari and Firefox wheel delta to physical pixels.

8d6c1ad

This makes it consistent with Chrome and partially fixes flutter/flutter#75850

knopp mentioned this issue Aug 16, 2022

Convert Safari and Firefox wheel delta to physical pixels. flutter/engine#35428

Merged

8 tasks

auto-submit bot closed this as completed in flutter/engine#35428 Sep 29, 2022

darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Sep 30, 2022

github-actions bot locked as resolved and limited conversation to collaborators Oct 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web: scrolling behaviour on Mac does not match platform #75850

Web: scrolling behaviour on Mac does not match platform #75850

tomgilder commented Feb 11, 2021

darshankawar commented Feb 12, 2021

stuartmorgan-g commented Feb 12, 2021

nilsreichardt commented Feb 12, 2021

yjbanov commented Feb 18, 2021

kf6gpe commented Feb 25, 2021

Ajmaljalal commented Mar 5, 2021

iapicca commented Oct 9, 2021

tomgilder commented Feb 23, 2022

huycozy commented Apr 29, 2022

Patrick386 commented Apr 30, 2022 •

edited by huycozy

Loading

tomgilder commented Jul 29, 2022

moffatman commented Aug 2, 2022

knopp commented Aug 15, 2022

knopp commented Aug 16, 2022

knopp commented Aug 16, 2022 •

edited

Loading

knopp commented Aug 16, 2022 •

edited

Loading

github-actions bot commented Oct 14, 2022

Web: scrolling behaviour on Mac does not match platform #75850

Web: scrolling behaviour on Mac does not match platform #75850

Comments

tomgilder commented Feb 11, 2021

darshankawar commented Feb 12, 2021

stuartmorgan-g commented Feb 12, 2021

nilsreichardt commented Feb 12, 2021

yjbanov commented Feb 18, 2021

kf6gpe commented Feb 25, 2021

Ajmaljalal commented Mar 5, 2021

iapicca commented Oct 9, 2021

tomgilder commented Feb 23, 2022

huycozy commented Apr 29, 2022

Patrick386 commented Apr 30, 2022 • edited by huycozy Loading

tomgilder commented Jul 29, 2022

moffatman commented Aug 2, 2022

knopp commented Aug 15, 2022

knopp commented Aug 16, 2022

knopp commented Aug 16, 2022 • edited Loading

knopp commented Aug 16, 2022 • edited Loading

github-actions bot commented Oct 14, 2022

Patrick386 commented Apr 30, 2022 •

edited by huycozy

Loading

knopp commented Aug 16, 2022 •

edited

Loading

knopp commented Aug 16, 2022 •

edited

Loading