[css-scroll-snap] Replace or improve fling estimation accuracy |
|||
Issue descriptionChrome Version: 71.0.3578.99 OS: Android What steps will reproduce the problem? (1) Navigate to https://output.jsbin.com/cojevevufo (2) Try to scroll one "slide" horizontally at a time What is the expected result? As a user, I can consistently move one slide at a time with a flick What happens instead? If I drag my flick for slightly too long, I move multiple slides at a time. I'm working on creating a horizontal carousel (e.g. for images) comprised of many slides, each using `scroll-snap-align`. I have found that I am unable to consistently move one slide at a time when using scroll-snap, which is not a desirable user experience. A very slight flick works, but a slightly longer flick may move some number of slides, which is hard to control with precision as a user. The number of slides inadvertently moved can be quite large. This problem seems to get worse the more slides you have (seems like momentum is based on the scroll width, with a full swipe moving from one end to another). This could be solved with the proposed scroll-snap-stop property to ensure that a flick never moves more than one slide at a time. It seems like it may not enter the spec however (see discussion in https://bugs.chromium.org/p/chromium/issues/detail?id=823998). I'm unclear about the proposed implementation of scroll-snap-stop, but it may not be ideal if the user is trying to quickly move through slides (e.g. go back to a previous one they were interested in). In comparison, Safari's behavior is very consistent in having one flick move one slide . On Safari, I can move up to two slides on the above example page with a solid long flick across the screen (to the point of being intentional), but anything shorter only moves one slide at a time. Safari never moves more than two slides at a time, which makes it easy to regain your position, even if you do a very long flick. To try to make the behavior a bit better, I have tried only showing one slide on either side of the current one, and hiding the rest using `display: none`. My implementation however is not ideal as it prevents users from quickly moving through the slides. There are other complications as well. For example, I want to essentially use IntersectionObserver to determine when to preload load images near the viewport. Using `display: none` will require that I have additional logic to preload those slides (or just give up and preload less). In addition to a single flick moving too far, the lower threshold seems a bit too high, especially compared to Safari. I find my self occasionally missing a swipe due to my flick being too short. This causes me to overcorrect into a larger flick, which ends up moving many slides. Related: https://bugs.chromium.org/p/chromium/issues/detail?id=823998
,
Jan 11
What a coincidence, came here to report the same issue. It's so unpredictable and bad because of this, that I have to forget about this functionality completely. What I can add is that it seems like the swipes seem to (in case of having a horizontal scroll) account not only the X axis, but also Y - so if you make a curved swipe, it counts the whole movement from A to B, and not only the difference on the axis we're interested in and you can end up with a REALLY fast swipe. Worth noting that it works in a similar fashion in Safari, but again - in a more predictable way. Ideally what I would like to see is just the normal, native scroll behaviour and then snap near/at the very end of the movement...
,
Jan 16
(6 days ago)
,
Today
(10 hours ago)
One of our design goal was to ensure a small flick and a large flick in fact behave differently to allow user intended scroll affect which snap area the ended up at. The spec also has guidelines that suggests this. I believe that is a good principle but perhaps our implementation can be tuned better. The way we have set to achieve the above was to use the "natural ending point" of a flick to decide the snap area that we chose. Basically, if your flick (a.k.a momentum scroll/fling) would end up one slide over, or three slide over, we will pretend that is the "final scroll position" and use that to choose the snap area. I think in theory this should work nicely. However in practice, in our current implementation we don't have the "natural end point" and we end up estimating it with some heuristic. I would not be surprised if this heuristic is not as accurate as we like which I believe can be perceived more clearly where precise control is desired (e.g., in your usecase). Do you have a video capture of the behavior? > This problem seems to get worse the more slides you have (seems like momentum is based on the scroll width, with a full swipe moving from one end to another). Interesting, I wonder if this is a side effect of how we estimate? sunyunjia@ any ideas here? perhaps for larger scrollers we will get larger flings and more GSU which can lead to even larger estimation error values. Or maybe our estimation performs worth for larger values. While the estimation approach was fine to start with, we have always intended to switch to using more accurate natural end point on platform where this is possible. I believe we can get this info on Android and CrOS but perhaps not Mac. Rather than trying to improve the estimation I like to see us get rid of it where possible. This should improve the android situation. Having said that, as you have found out, we intend to implement scroll-snap-stop for usecases where they always want to force a single slide (regardless of flick strength). But I feel we first need to fix the natural fling estimation issue since it will have broader improvements. Also not other vendor has implemented scroll-snap-stop yet.
,
Today
(10 hours ago)
,
Today
(10 hours ago)
re #2: > so if you make a curved swipe, it counts the whole movement from A to B, and not only the difference on the axis we're interested in and you can end up with a REALLY fast swipe. Worth noting that it works in a similar fashion in Safari, but again - in a more predictable way. Right, we do take the whole 2d movement into account in our estimation. So that is potentially possible though I have not tested it. However, Chrome has scroll railing on most platforms (e.g., it tends to ignore minor scroll delta in one axis in favor of 1d scrolls) so this should happen fairly rarely. What platform did you notice this, and do you have a video screen capture of this to share? |
|||
►
Sign in to add a comment |
|||
Comment 1 by eirage@chromium.org
, Jan 10Status: Assigned (was: Untriaged)