<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Using animation and transition to drive transform styles gives incorrect hitbox (hit testing)"
href="https://bugs.webkit.org/show_bug.cgi?id=158554">158554</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Using animation and transition to drive transform styles gives incorrect hitbox (hit testing)
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>URL</th>
<td>https://jsfiddle.net/MadLittleMods/pd7yk1cq/
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>mad.little.mods@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>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, <a href="https://jsfiddle.net/MadLittleMods/pd7yk1cq/">https://jsfiddle.net/MadLittleMods/pd7yk1cq/</a>
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, <a href="https://jsfiddle.net/MadLittleMods/pd7yk1cq/11/">https://jsfiddle.net/MadLittleMods/pd7yk1cq/11/</a>
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:
- <a class="bz_bug_link
bz_status_NEW "
title="NEW - Make animation and transition hit testing tests work in iOS DRT"
href="show_bug.cgi?id=119344">https://bugs.webkit.org/show_bug.cgi?id=119344</a>
- <a class="bz_bug_link
bz_status_NEW "
title="NEW - Incorrect element hit testing for inline elements containing children with transform applied"
href="show_bug.cgi?id=153202">https://bugs.webkit.org/show_bug.cgi?id=153202</a>
- <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Fix hit testing for divs with a hierarchy of css transformed and non-transformed elements"
href="show_bug.cgi?id=124777">https://bugs.webkit.org/show_bug.cgi?id=124777</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>