New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 778559 link

Starred by 2 users

Issue metadata

Status: Duplicate
Merged: issue 780102
Owner: ----
Closed: Apr 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug

Blocked on:
issue 780102



Sign in to add a comment

Events are delayed even after slow scrolling is finished

Reported by tobias.r...@esolutions.de, Oct 26 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36

Steps to reproduce the problem:
1. Have an onScroll listener which is quite slow (e.g. takes 20ms for each execution)
2. On the last scroll event (e.g. when hitting scrollTop=0), start a CSS transition animation or timeout
3. The "transitionend" event resp. the timeout callback is called way too late, even there are no more scroll events any more

What is the expected behavior?
"transitionend" listener is called just when the transition animation has finished. Timeout callback is called just after the specified time.

Since there are no more scroll events after starting the CSS animation resp after calling setTimeout, the slow scroll listener should not affect the transitionend or timeout events.

What went wrong?
"transitionend" listener or setTimeout callback are called way too late (like after 2 seconds for a 200ms animation/timeout).

Did this work before? N/A 

Chrome version: 62.0.3202.62  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

For an actual Example see http://jsfiddle.net/7nq6pL6n/

1. Scroll the list a little up and down by touchscreen, when fling the list up to the top.
2. There is a onScroll listener which is quite slow: it takes 20ms for each execution
3. When the list hits the top (scrollTop=0), a CSS transition is started, which and moves the circle to the right. That animation takes 200ms.
4. When that transition animation is finished, a "transitionend" listener is called. On transitionend a timeout is started with 200ms.
5. After that timeout the circle is moved back to origin (not animated)

What I can see there using the console output:

> Circle animation finished after 1891 ms (expected: 200), start timeout now
> Timeout finished after 575 ms (expected: 200)

Additionally that page has an interval which fires every 500ms.
During the scrolling there are no interval callbacks, which might be Ok due to event priorisation.
But: After some scrolling that interval seems to be throttled even for some reason even though scrollig is finished. Then the callback is called only every 1000ms.

It seems strange to me, that the slow scroll listener affects that transitionend-listener/timeout/interval, because at the time of these animations/timeouts there are no scroll events any more.
 
Labels: Needs-Triage-M62
Components: -Blink Blink>Input
Another example with 2 consecutive transition animations after a slow scrolling:
http://jsfiddle.net/mfynx0nt/2

The first transition animation (to the left) is smooth, the second animation (back to the right) is very jitty
Cc: sc00335...@techmahindra.com
Components: Blink>Scroll
Labels: Triaged-ET Needs-Feedback
Unable to reprodce this issue on latest stable 62.0.3202.75 using Windows 7 with below steps. Attaching screenshot of behaviour we see.

1.Launched chrome and navigated to http://jsfiddle.net/7nq6pL6n/
2.Scrolled down and scrolled back to top 
3. Observations: 

> Circle animation finished after 229 ms (expected: 200), start timeout now
> Timeout finished after 201 ms (expected: 200)

@Reporter: Could you please check the attached screenshot and let us know if we miss anything. This would help in further triaging from chrome TE end. 
Issue 778559.png
145 KB View Download
Cc: altimin@chromium.org
Components: -Blink>Input -Blink>Scroll Blink>Scheduling
Status: Available (was: Unconfirmed)
I think this is us pre-emptively blocking expensive timers to avoid scroll jank. We're thinking of ways of improving the logic behind -- possibly we could prioritize the animation related events for instance.
Blockedon: 780102
crbug.com/780102 is the master bug for tracking work of tuning preemptive blocking.
@sc00335...@techmahindra.com:
Attached two screen recording (1 with touchscreen and 1 with mousewheel-scrolling), where I reproduced the problem on the example page.
You probably have to scroll a while around before scrolling back to the top again to cause the delay.
touchscrolling.webm
1.3 MB View Download
mousewheelscrolling.webm
2.6 MB View Download
I just realized, this problem happens only when using an actual touchscreen, not with the touch emulation of the dev tools.

However, after using a touchscreen once, the problem also happens when scrolling by mousewheel.
Mergedinto: 780102
Status: Duplicate (was: Available)

Sign in to add a comment