[desktop] Horizontal Scrolling Broken on windows and linux #83359
Description
Current behavior
This video shows the current behavior of scrolling on web (dekstop) since #81569 has been merged (I think). It is not immediately obvious what is going on, so here is what this shows:
- You cannot scroll by dragging anymore.
- You can scroll both vertically and horizontally using trackpads.
- You can only scroll vertically using scroll wheels.
2021-05-25.16-51-26.mp4
What is broken
Since #81569, there are two major issues that come up because of this:
- On desktop devices without trackpad (i.e. with a regular mouse), you cannot scroll horizontally at all. This means that it is now impossible to reach some of the content (scroll the first item in the video).
- On some desktop devices with trackpad, horizontal scroll is also not possible. Some of our users report that it does not work for them anymore (internal product that is why using
dev). I assume this is because the "trackpad" on their device works by immitating dragging (?).
→ in an attempt to fix #71322, #81569 (I think) made it impossible to scroll horizontally by breaking it on devices with a scroll wheel only (1.) and on some other devices (2.) even though they do have a trackpad.
Reproduction
I am not sure which devices cause 2. but I know that it has been introduced in one of the most recent dev update for our users (between 2.3.0-0.1.pre and 2.3.0-12.1.pre). The scroll wheel one is even more obvious - there are many features in our app partially broken because of this update.
Click to see code
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: ListView.builder(
itemBuilder: (context, index) {
if (index == 0) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: 240,
child: ColoredBox(
color: Colors.redAccent,
child: Center(
child: Text(
'This is a horizontally scrolling view. ' * 20,
style: const TextStyle(
color: Colors.white,
fontSize: 142,
),
),
),
),
),
);
}
return SizedBox(
width: double.infinity,
height: 120,
child: ColoredBox(
color: HSVColor.fromAHSV(1, (index * 45) % 360, 3 / 4, 3 / 4)
.toColor(),
),
);
},
),
),
));
}Click to see flutter doctor
[✓] Flutter (Channel origin/dev, 2.3.0-12.1.pre, on Microsoft Windows [Version 10.0.19042.985], locale en-150)
• Flutter version 2.3.0-12.1.pre
• Upstream repository remotes
• Framework revision f9c825981c (7 days ago), 2021-05-18 14:07:52 -0700
• Engine revision 26e217e6c3
• Dart version 2.14.0 (build 2.14.0-edge.a527411e5100a0a4f48c4009087a1b988aa784af)
Workaround
A workaround for this regression is adding:
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.mouse,
PointerDeviceKind.touch,
},
),
child: HorizontalScrollView(...),
)Everywhere where there is a horizontal scroll view. This cannot be the solution.
Activity
creativecreatorormaybenot commentedon May 25, 2021
I found a migration guide through #82982, however, this is definitely a breaking change and only addresses 1. (in some minor capacity) but not 2.
creativecreatorormaybenot commentedon May 25, 2021
Also @TahaTesser mentioned this in #83065 (comment):
However, this is not true at all for me - i.e. using shift does not change anything in the reproducible sample for me - it will still only scroll horizontally.
Even considering everything #82982, #83065, and flutter/website#5771, I still consider both 1. and 2. as fully open (and not duplicates).
This is because for 1. scrolling with shift does not work for horizontal scroll and for 2. trackpad is now also broken for some of our users.
TahaTesser commentedon May 26, 2021
Hi @creativecreatorormaybenot
Thanks for filing the issue.
I used
macOSto reproduce #83065,shift+ scroll works fine onmacOS.However testing your code sample on three desktop platforms, I can see the
shift+ scroll doesn't work onwindowsandlinuxbut works onmacOSeven when using your code sampleIt's not just web but desktop, behaviour is same
macOS
shift+ scrollflutter doctor -v
windows
shift+ scrollflutter doctor -v
linux
shift+ scrollflutter doctor -v
[-][web] Horizontal Scrolling Broken[/-][+][desktop] Horizontal Scrolling Broken on windows and linux[/+]12 remaining items
talski commentedon May 28, 2021
How can I re-enable scroll by dragging on entire web app? Tried to set scrollBehavior in MaterialApp but it doesn't work
Piinks commentedon Jun 2, 2021
The shift+mouseScroll issue is being tracked in #75180. It is currently implemented in the engine for macOS AFAIK and support needs to be added for Windows and Linux. This was discussed as a potential blocker to landing this feature, but instead we found a non-breaking way to move forward and planned a migration guide for those that desired the previous behavior while we move on to work on better horizontal scrolling support.
Also AFAIK, trackpad gestures are treated as pointer mouse scrolls. This is because trackpad support has not yet been implemented in flutter. That is being tracked in #23604 I believe.
The behavior that was changed in #81569 can be completely restored to the previous behavior by setting
ScrollBehavior.dragDevicestoPointerDeviceKind.valuesto allow all devices to drag. Making this change is covered in the migration guide that is open in flutter/website#5771#81569 was not found to be a breaking change in the course of development in accordance with our breaking change policy. We do welcome everyone to contribute to flutter/tests to help us better identify breaking changes though. These tests are run against every flutter change before it lands to avoid breaks.
The trackpad and shift+mouseScroll issues appear to be covered by the other linked issues. I think we can close this issue then unless there are any other outstanding issues here. The other features that remain to be implemented are part of our ongoing journey to reach stable desktop. :)
For more context around this change, see #81832 as well.
creativecreatorormaybenot commentedon Jun 2, 2021
@Piinks thanks for taking a look at it 🙏
This roughly sounds right, but as I said this seemed to be breaking for some of our users because their trackpads were no longer detected.
Also for me personally, I cannot use it at all because we cannot scroll precisely, but I am fine with this being tracked in another issue. Just overall, after having it rolled out to our internal users, it became clear that this was breaking the app for too many users and we had to revert to the old behavior. I think this might cause a lot of problems when rolling the feature onto stable in this state.
Piinks commentedon Jun 2, 2021
I expect when we add official trackpad support this will be consistent. :)
This feature will only affect desktop platforms, which are not yet supported on the stable channel. We currently do not recommend releasing a desktop application to production until it has reached the stable channel. You can read more about this in our desktop documentation.
I am going to close this then. Please track the outlying features in the linked bugs above. If anything else comes up regarding this issue, please do not hesitate to re-open so we can discuss further! Thank you! :)
creativecreatorormaybenot commentedon Jun 2, 2021
@Piinks actually, we are experiencing this issue on Flutter web and that is stable - or not?
timsneath commentedon Jun 2, 2021
Are you experiencing something broken on the stable channel?
creativecreatorormaybenot commentedon Jun 2, 2021
@timsneath no, I am sorry if this was a misunderstanding.
We have an internal app that uses the
beta/devchannel (allows us to use the latest features and prepare for changes hittingstablein advance). In this app, some of our internal users reported not being able to scroll anymore (after #81569 was merged in).Investigating this, some of the users simply used to scroll by dragging: we could explain to them that they can use the trackpad, however, for some other users, their trackpad was not working anymore in the Flutter web app after #81569.
After applying:
We were able to restore the previous behavior and also fix the trackpad issues for our internal users. However, I imagine that when this change lands on
stable, a lot of apps will break before they figure out how to work around this "regression".timsneath commentedon Jun 3, 2021
Thanks! In general, if we make a breaking change between stable releases, we post a breaking change announcement here by the time we ship to stable: https://flutter.dev/docs/release/breaking-changes
As you know, if you're on an unstable channel, then you sign up to join us in the jeweler's workshop, where things can be a little more messy and not everything gem is polished :)
github-actions commentedon Jul 31, 2021
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 -vand a minimal reproduction of the issue.