Skip to content

Flutter Scrolling does not match iOS; inadvertent scrolling when user lifts up finger #97761

Closed
Closed
Flutter Scrolling does not match iOS; inadvertent scrolling when user lifts up finger#97761
#139166 (+3)
Assignees
Piinks
Labels
P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: scrollingViewports, list views, slivers, etc.found in release: 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@chipweinberger
chipweinberger
opened on Feb 4, 2022

Flutter 2.8.1
iOS 15.3
iPhone 12 Mini

Problem: Doing the exact same gesture on both Flutter and the iOS Settings App, its far easier to accidentally scroll when you lift your finger up. It's actually kind of hard not to hit this behavior.

Given how important scrolling is, this seems really important to fix for users. It also looks pretty bad to developers because this is the kind of issue that React Native, and Native just gets right by design.

I think what is happening: we are detecting a 'Fling' gesture when we should not be? If you move your finger slowly this behavior does not happen, because we never confuse it for a fling perhaps. Maybe the 'Fling' logic is too simplistic and needs to take the last ~200 milliseconds of events into greater account?

inadvertant.scrolling.small.mov 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  const MyApp({Key? key}): super(key: key);

  Widget buildScrollWidget() {
    List<Widget> wList = [];
    for (int i = 0; i < 20; i++){
      wList.add(Container(height: 200, color: Colors.white));
      wList.add(Container(height: 200, color: Colors.grey));
      wList.add(Container(height: 200, color: Colors.blue));
      wList.add(Container(height: 200, color: Colors.green));
      wList.add(Container(height: 200, color: Colors.pink));
      wList.add(Container(height: 200, color: Colors.purple));
      wList.add(Container(height: 200, color: Colors.orange));
    }
    return ListView(children: wList);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Scroll Test',
      theme: const CupertinoThemeData(primaryColor: Colors.white),
      home: buildScrollWidget(),
    );
  }
}

Activity

  1. darshankawar
    added
    in triagePresently being triaged by the triage team
    on Feb 4, 2022

  2. darshankawar commented on Feb 4, 2022

    @darshankawar
    darshankawar
    on Feb 4, 2022
    Member

    iOS 15.3
    iPhone 12 Mini

    @chipweinberger I although don't have said OS and device, but I verified this behavior using latest master and stable (2.10.0) on iPhone 6s (OS 14.4.1) but didn't notice the unusual scrolling:

    RPReplay-Final1643964993.MP4
    stable, master flutter doctor -v 
    
[✓] Flutter (Channel stable, 2.10.0, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.10.0 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f105a6ca7 (2 days ago), 2022-02-01 14:15:42 -0800
    • Engine revision 776efd2034
    • Dart version 2.16.0
    • DevTools version 2.9.2

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.99

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

! Doctor found issues in 1 category.


[✓] Flutter (Channel master, 2.10.0-1.0.pre.421, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.10.0-1.0.pre.421 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 58407234f5 (29 minutes ago), 2022-02-04 06:40:13 +0200
    • Engine revision dfaad2a2c2
    • Dart version 2.17.0 (build 2.17.0-79.0.dev)
    • DevTools version 2.10.0

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.99

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

! Doctor found issues in 1 category.

    Can you upgrade to latest versions and try again to see if behavior still persists or not ?

  3. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 4, 2022

  4. chipweinberger commented on Feb 4, 2022

    @chipweinberger
    chipweinberger
    on Feb 4, 2022
    ContributorAuthor

    @darshankawar theres some technique to it. I find it happens more if your thumb is flatter against the screen when you lift up. If your thumb is too “pointy”, it’s harder to repro.

    Are there any considerations when switching Flutter versions? I don’t want to screw up my dev environment.

  5. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 4, 2022

  6. chipweinberger commented on Feb 4, 2022

    @chipweinberger
    chipweinberger
    on Feb 4, 2022
    ContributorAuthor

    Oh I didn’t know 2.10 just came out! I’ll upgrade and report back.

  7. darshankawar
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 4, 2022

  8. chipweinberger commented on Feb 4, 2022

    @chipweinberger
    chipweinberger
    on Feb 4, 2022
    ContributorAuthor

    I can repro on 2.10.

  9. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 4, 2022
  10. darshankawar
    changed the title [-][Flutter 2.8.1] Flutter Scrolling does not match iOS; inadvertent scrolling when user lifts up finger[/-] [+]Flutter Scrolling does not match iOS; inadvertent scrolling when user lifts up finger[/+] on Feb 7, 2022

  11. darshankawar commented on Feb 7, 2022

    @darshankawar
    darshankawar
    on Feb 7, 2022
    Member

    Ok, I tried this behavior again on iPhone 12 mini and on iPhone 12 Pro max simulators and could see the scroll happening when I lift the pointer up:

    97661.mov

    But I was unable to replicate this on a physical device (iPhone 6s) as mentioned earlier.

    As I observed, the extra scrolling doesn't occur everytime I try to scroll but occurs sometimes.

    I am keeping it open and labeling it for further insights from the team on this behavior.

    stable, master flutter doctor -v 
    
[✓] Flutter (Channel master, 2.11.0-0.0.pre.452, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.452 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba01ec8faa (27 hours ago), 2022-02-05 22:05:18 -0500
    • Engine revision 0712096899
    • Dart version 2.17.0 (build 2.17.0-85.0.dev)
    • DevTools version 2.10.0

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 14.4.1 18D61
    • macOS (desktop)           • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 97.0.4692.99

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

! Doctor found issues in 1 category.

[✓] Flutter (Channel stable, 2.10.0, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.10.0 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f105a6ca7 (2 days ago), 2022-02-01 14:15:42 -0800
    • Engine revision 776efd2034
    • Dart version 2.16.0
    • DevTools version 2.9.2

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 97.0.4692.99

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

! Doctor found issues in 1 category.

    /cc @Piinks

  12. darshankawar
    added
    p: cupertino_uicupertino_ui package in flutter/packages
    f: scrollingViewports, list views, slivers, etc.
    found in release: 2.10Found to occur in 2.10
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Feb 7, 2022

  13. 29 remaining items

  14. flutter-triage-bot
    unlocked this conversation on Oct 20, 2023
  15. auto-submit
    closed this as completedin #137381on Nov 15, 2023
  16. auto-submit
    added a commit that references this issue on Nov 15, 2023

    Reland VelocityTracker update (#132291) (#137381)

    1ac7333
  17. Piinks
    self-assigned this
    on Nov 15, 2023
  18. auto-submit
    added 2 commits that reference this issue on Nov 15, 2023

    Reverts "Reland VelocityTracker update (#132291)" (#138512)

    82a7a62

    Reland VelocityTracker update (again) (#138843)

    3e4e280
  19. darshankawar
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Nov 27, 2023
  20. auto-submit
    added a commit that references this issue on Nov 29, 2023

    Update VelocityTracker (4) (#139166)

    8ba459c

  21. github-actions commented on Dec 11, 2023

    @github-actions
    github-actionsbot
    on Dec 11, 2023 – with GitHub Actions

    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.

  22. github-actions
    locked as resolved and limited conversation to collaborators on Dec 11, 2023
  23. caseycrogers
    added 2 commits that reference this issue on Dec 29, 2023

    Reland VelocityTracker update (again) (flutter#138843)

    43c9990

    Update VelocityTracker (4) (flutter#139166)

    ea3f38d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: scrollingViewports, list views, slivers, etc.found in release: 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions