Using animation and transition to drive transform styles gives incorrect hitbox (hit testing)

• Component: Layout and Rendering
• Status: NEW ---

[Eric]

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

[Simon Fraser (smfr)]

It's a bit weird that the box has both a transition and an animation. This seems necessary to trigger the bug.

[Simon Fraser (smfr)]

Created attachment 280927 [details]
Standalone test

[Simon Fraser (smfr)]

The animation overrides the transition, but when it ends we fail to restart then end th e transition.