New issue
Advanced search Search tips

Issue 915670 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

In at least a snapport, can animation curves for scrolling from scroll-behavior and scroll-snap be consistent/consolidated?

Reported by h...@jonjohnjohnson.com, Dec 17

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3642.0 Safari/537.36

Steps to reproduce the problem:
Open the test case

1. Using a trackpad, swipe with two fingers horizontally and notice how snapping animation feels on the end of your gestures.
2. Using the "tabs" at the top of the screen click between different tabs and notice how scrolling to the destinations (same as snap-aligned elements) animates.

What is the expected behavior?
For an end users sake, these two different scrolling interactions should  afford the same effect and/or appear/feel the same. 

What went wrong?
These two different ways of scrolling within a snapport, feel/appear quite different/jarring to a user.

Did this work before? No 

Chrome version: 73.0.3642.0  Channel: canary
OS Version: OS X 10.12.6
Flash Version: 

I'm guessing animation curves/timing shouldn't feel the same for all scroll containers, based upon particular scroll distances and length of scrollbox and scrollport?

But it does seem reasonable, as well as desirable that for a snapport, the test case should provide more consistent visuals/interactions.

cc sunyunjia@chromium.org bokan@chromium.org majidvp@chromium.org
 
Previously attached the wrong/unfinished file (facepalm).

Here is the replacement attachment.
index.html
6.8 KB View Download
Labels: Needs-Triage-M73
Components: -UI Blink>CSS
Components: -Blink>CSS Blink>Animation Blink>Scroll
Cc: sunyunjia@chromium.org bokan@chromium.org majidvp@chromium.org
Cc: viswa.karala@chromium.org
Labels: Needs-Feedback Triaged-ET
Tried testing the issue on chrome reported version# 73.0.3639.1 using Ubuntu 14.04 with steps mentioned below:
1) Launched chrome reported version, dragged and dropped the file provided in comment# 1
2) With two finger scrolling, scrolled horizontally, able to see page scrolled without any issues
3) Also used 'Tab' to scroll, able to scroll with 'Tab' without any issues.

@Reporter: Please find the attached screencast for your reference and provide your feedback on it which help in further triaging it in better way. If possible could you please provide screencast of the issue which help in better understanding.

Thanks!
915670.mp4
2.0 MB View Download
++ correction:
Tried testing the issue on chrome reported version# 73.0.3639.1 using Mac 10.12.6 with steps mentioned below:
viswa.karala@chromium.org The issue/request I'm bringing up is that, on a scroll container with a snapport, the programmatic scrolling that happens from scroll-behavior property has a different animation curve/timing than the programmatic scrolling that commences at the end of a gesture to resolve on a snap-aligned position.

Your video shows the differences, even if it does show that yes, both do in fact scroll successfully.

The differences are more apparent when scroll-behavior as set to smooth travels longer distances. Click tab 1. Then click tab 5. The animation curve feels very off from the visual provided if a user would gesturally scroll and snap between adjacent or even very distance points. The snap curve is always much shorter, and doesn't seem to ease in, while having a harsher ease out.

I hope this helps. I am guessing bokan@chromium.org and majidvp@chromium.org will understand the request from a usability/experience standpoint when firing up the attached case.

Cc: -majidvp@chromium.org
Owner: majidvp@chromium.org
Status: Assigned (was: Unconfirmed)
Assigning to Majid to triage. I think this is just tweaking the animation curves between snapping and scroll-behavior: smooth to be more consistent.
:raised_hands:

Again, I do understand how scroll-behavior set to smooth on scroll containers without snapports makes sent to "ease-in-out" and be timed often longer in relation to the distance of the scroll.

But it does seems all around better to sync up the animation curves when a snapport is present. :D
Labels: -Needs-Feedback Hotlist-Polish
Here's a slightly more drastic way to see the same differences shown in the attached test case: https://vault.jonjohnjohnson.com/examples/scrolltabs/

Click between tabs 1 and 12 to see a much larger distance using scroll-behavior: smooth.
Also, Majid, if you check out the cases in firefox, you'll see their animation curve for "scroll-behavior: smooth" doesn't "ease-in" at all when clicking the tabs, behaving with a lot more parity to scroll-snap behavior.

Sign in to add a comment