Bug 153202 – Incorrect element hit testing for inline elements containing children with transform applied

• Status: NEW
• Component: Layout and Rendering

[Robert Knight]

This is a re-post of an issue which I originally filed for Chrome but was also able to reproduce in Safari 9: https://code.google.com/p/chromium/issues/detail?id=576655 . A patch for Chrome is under review at https://codereview.chromium.org/1588003003/

Example URL:
https://gist.github.com/robertknight/8450c09b280564df03f9

Steps to reproduce the problem:

1. Save the gist to a local HTML file and open it in Chromium
2. Hover the mouse over the space between 'World' and 'Test', note that no background color is seen and the cursor is the default cursor.
3. Hover the mouse over 'World' so that the <span> gets a red background
4. Hover the mouse over the space between 'World' and 'Test', note that the behavior is now different from in step 1. The background/cursor styles are now applied.

Compare the result to Firefox where the background color is shown when hovering the space between 'World' and 'Test' in step 1.

What is the expected behavior?
I expect that hovering the space between 'World' and 'Test' would highlight the element in step 1.

What went wrong?
Adding a transform or other effect which triggers a new stacking context to a child of an `inline` element appears to break hit testing for the element when it is initially displayed.

Does it occur on multiple sites: No

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

[Radar WebKit Bug Importer]

<rdar://problem/24230705>