Issue metadata
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 descriptionUserAgent: 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.
,
Oct 26 2017
,
Oct 27 2017
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
,
Oct 30 2017
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.
,
Oct 31 2017
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.
,
Oct 31 2017
crbug.com/780102 is the master bug for tracking work of tuning preemptive blocking.
,
Nov 2 2017
@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.
,
Jan 11 2018
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.
,
Apr 3 2018
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Oct 26 2017