Web Animations: finish/cancel events don't fire until a relayout after finish()/cancel() inside rAF |
|||||||
Issue description
1. Create an animation with a fixed duration.
2. Listen to the 'finish' event.
3. Inside requestAnimationFrame, call animation.finish();
The 'finish' event doesn't fire until the page is resized or the animation is stringified in the console.
Tested on Linux with 51.0.2704.84, 53.0.2768.0
Reproduces reliably on blank pages, e.g. about://blank, by pasting the following into the console:
var d = document.createElement('div');
document.body.appendChild(d);
var a = d.animate([{
height: '100px',
}, {
height: '200px',
}], {
duration: 1000,
});
a.addEventListener('finish', console.log.bind(console, 'Animation finished'));
requestAnimationFrame(function() {
console.log('rAF');
a.finish();
});
,
Jun 15 2016
,
Jul 4 2016
,
Oct 6 2016
Increasing update frequency, investigation needed
,
Oct 25 2016
,
Nov 23 2016
,
Nov 23 2016
Might be related: https://bugs.chromium.org/p/chromium/issues/detail?id=617539
,
Nov 25 2016
Proposed fix: https://codereview.chromium.org/2527043002/
,
Nov 28 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e796f22278e322c1b162deb5b6bbe1895b444c2e commit e796f22278e322c1b162deb5b6bbe1895b444c2e Author: loyso <loyso@chromium.org> Date: Mon Nov 28 08:05:56 2016 Blink Animation: Request serviceOnNextFrame on animation's finish and cancel. void AnimationTimeline::setOutdatedAnimation(Animation* animation) { DCHECK(animation->outdated()); m_outdatedAnimationCount++; m_animationsNeedingUpdate.add(animation); if (isActive() && !m_document->page()->animator().isServicingAnimations()) m_timing->serviceOnNextFrame(); } AnimationTimeline::setOutdatedAnimation doesn't request m_timing->serviceOnNextFrame() if animator().isServicingAnimations() (i.e. it is inside the requestAnimationFrame). Request it explicitly. BUG= 620160 Review-Url: https://codereview.chromium.org/2527043002 Cr-Commit-Position: refs/heads/master@{#434614} [add] https://crrev.com/e796f22278e322c1b162deb5b6bbe1895b444c2e/third_party/WebKit/LayoutTests/web-animations-api/animation-cancel-in-raf.html [add] https://crrev.com/e796f22278e322c1b162deb5b6bbe1895b444c2e/third_party/WebKit/LayoutTests/web-animations-api/animation-finish-in-raf.html [modify] https://crrev.com/e796f22278e322c1b162deb5b6bbe1895b444c2e/third_party/WebKit/Source/core/animation/Animation.cpp [modify] https://crrev.com/e796f22278e322c1b162deb5b6bbe1895b444c2e/third_party/WebKit/Source/core/animation/Animation.h
,
Nov 28 2016
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by michae...@chromium.org
, Jun 14 2016