Bug 158554 - Using animation and transition to drive transform styles gives incorrect hitbox (hit testing)
Summary: Using animation and transition to drive transform styles gives incorrect hitb...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: Macintosh OS X 10.11
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/MadLittleMods/pd...
Keywords: LayoutTestFailure
Depends on:
Reported: 2016-06-08 19:19 PDT by Eric
Modified: 2016-06-09 11:03 PDT (History)
1 user (show)

See Also:

Standalone test (738 bytes, text/html)
2016-06-09 10:42 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Eric 2016-06-08 19:19:31 PDT
Tested and reproduced on Safari 9.1 (WebKit 601.5.17), Safari Technology Preview 9.1.2 (WebKit 602.1.35) on OSX 10.11.4 and with the mobile-Safari simulator on iOS 9.3 (WebKit 601.1.46).

When you have an animation and transition driving some `transform` styles the hitbox (hit-testing) is offset to where it was originally positioned before the animation.

Reproduction steps:

 1. Open the demo, https://jsfiddle.net/MadLittleMods/pd7yk1cq/
 2. Notice how the box turns green when you hover over it
 3. Click on the box to animate it into position.
 4. Notice how hovering over the box isn't turning it green
 5. Notice how hovering where the box used to be turns it green


But there seems a be a bit more going on. With that demo, toggling the `.is-active` class by listening to clicks on the body or box itself, reproduces the bug.

If you instead toggle the class with a separate button, the hitboxes are correct, https://jsfiddle.net/MadLittleMods/pd7yk1cq/11/

In my real world scenario, I am toggling a "next" button that slides in the next step but it still reproduces the bug. Hopefully these extra factors don't over-complicate things.


Here are some old reports but were the only reports I could find that are slightly relevant:

 - https://bugs.webkit.org/show_bug.cgi?id=119344
 - https://bugs.webkit.org/show_bug.cgi?id=153202
 - https://bugs.webkit.org/show_bug.cgi?id=124777
Comment 1 Simon Fraser (smfr) 2016-06-09 10:41:21 PDT
It's a bit weird that the box has both a transition and an animation. This seems necessary to trigger the bug.
Comment 2 Simon Fraser (smfr) 2016-06-09 10:42:44 PDT
Created attachment 280927 [details]
Standalone test
Comment 3 Simon Fraser (smfr) 2016-06-09 11:03:31 PDT
The animation overrides the transition, but when it ends we fail to restart then end th e transition.