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

Issue 783985 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Animation panel timeline keyframe jitter on hover

Reported by amr.m.d...@gmail.com, Nov 10 2017

Issue description

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

Steps to reproduce the problem:
1. navigate to https://daneden.github.io/animate.css/ (or any site with animation)
2. open dev tools 
3. select console tab and from the extra panels select Animations
4. play the bounce animation or refresh (capture an animation)
5. try to edit the keyframe by dragging the white circles

What is the expected behavior?
dragging the white circle should allow you to modify the keyframe timing

What went wrong?
whenever you hover over the white circle it moves away to the left, making it no longer hoverd and causing it to return, then since the mouse didn't move it is hovered again, this keeps happening until the mouse is moved making it very difficult to move the keyframe

Did this work before? N/A 

Chrome version: 62.0.3202.89  Channel: stable
OS Version: OS X 10.12.6
Flash Version:
 
animation pael bug.gif
2.5 MB View Download
Cc: susanjuniab@chromium.org
Labels: -Type-Bug -Pri-2 hasbisect-per-revision ReleaseBlock-Stable M-64 Needs-Triage-M62 OS-Linux OS-Windows Pri-1 Type-Bug-Regression
Owner: f...@opera.com
Status: Assigned (was: Unconfirmed)
Able to reproduce this issue on Windows 7, Mac OS 10.12.6 and Ubuntu 14.04 using the latest Canary 64.0.3266.0 with the steps mentioned in the original comment.

Bisect Information:
=====================
Good build: 64.0.3263.0 (Revision-515052)
Bad Build : 64.0.3264.0 (Revision-515409)

By executing the per-revision bisect script, below is the change log URL.

Change Log URL: 
===============
https://chromium.googlesource.com/chromium/src/+log/daf11e8f4eeed2d409b857dca2c83f7613334e9a..e6fbde070b59cde157b26db7251e80436b14e5a3

From the above change log the possible CL suspect is:
Reviewed-on: https://chromium-review.googlesource.com/759040

Fredrik@ Could you please check whether this issue is caused with respect to your change, if not please help us in assigning it to the right owner.

Adding ReleaseBlock-Stable label as this is a recent regression. Please feel free to remove the same if it is not applicable.


Thanks...
Project Member

Comment 2 by bugdroid1@chromium.org, Nov 15 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/828654a96d8f945a5a2e9dae8ec29c4dbabf3229

commit 828654a96d8f945a5a2e9dae8ec29c4dbabf3229
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Nov 15 11:53:17 2017

Specify fill-box transform-box for circle.animation-{end,keyframe-}point

The transform-origin is supposed to be relative to the fill-box (the
object's/circle's bounding box) and not the viewport (which is the
initial value.)

Bug:  783985 ,  595829 
Change-Id: I80b5b64a3bbeaca1d305972733820d361a7c064e
Reviewed-on: https://chromium-review.googlesource.com/765887
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#516671}
[modify] https://crrev.com/828654a96d8f945a5a2e9dae8ec29c4dbabf3229/third_party/WebKit/Source/devtools/front_end/animation/animationTimeline.css

Comment 3 by f...@opera.com, Nov 15 2017

Status: Fixed (was: Assigned)
Labels: TE-Verified-M64 TE-Verified-64.0.3270.0
Tested the issue on Windows 7, Mac OS 10.12.6 and Ubuntu 14.04 using chrome version 64.0.3270.0 by following the steps mentioned in the original comment and issue seems to be fixed.

Observed that on hovering the mouse over the circle in Devtools -> Console -> Animations, can see no jitter on the circle.
Attaching screen cast for reference.
Hence adding TE-Verified Labels.

Thanks!
783985_latestCanary.webm
1.9 MB View Download

Sign in to add a comment