Issue 711094 link

Starred by 1 user

Issue metadata

Status:	Duplicate
Merged:	issue 687156
Owner:	----
Closed:	Apr 2017
Components:	Blink>HitTesting
EstimatedDays:	----
NextAction:	----
OS:	Mac
Pri:	2
Type:	Bug
Via-Wizard-Content BugSource-User PaintTeamTriaged-20170413

Hit testing (:hover) with overflow:hidden ignores rounded corner clipping

Reported by seedpxw...@gmail.com, Apr 12 2017

Issue description

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

Example URL:
http://codepen.io/pxwee5/pen/ZKExWM

Steps to reproduce the problem:
1. Visit codepen
2. Open with Chrome
3. Open with IE
4. Hover mouse to the text for both browsers and see the difference

What is the expected behavior?
In Chrome, the background does not change to green.
In IE, the background changes to green, because overflow: hidden successfully crops even the child elements.

What went wrong?
Chrome needs to reprogram overflow: hidden to crop all hierarchical child elements and its events, not just the immediate child element.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: stable
OS Version: OS X 10.12.4
Flash Version:

Comment 1 by junov@chromium.org, Apr 13 2017

Components: -Blink Blink>HitTesting
Status: Untriaged (was: Unconfirmed)
Summary: Hit testing (:hover) with overflow:hidden ignores rounded corner clipping (was: CSS Overflow does not crop child links)

Bug Confirmed.  

Adding precision to the repro steps: Hover the mouse just outside of the circle at a place where there would be text if the text were not clipped.

What seems to be happening:
a) The crop is correctly applied for rendering the page.
b) The crop is not being applied when performing the hit test for the :hover pseudo-class.

Attached is a screenshot with a red mark that indicates the position of the pointer when the screenshot was taken. According to the spec[1], an element must be considered as being hovered when a descendant is designated by the pointer.  Therefore, 'circle' is hovered whenever 'inner-circle' is hovered. In this case it looks like the browser is registering a hover on the 'inner-circle' div in a region where it is clipped out by its ancestor.

https://html.spec.whatwg.org/multipage/scripting.html#selector-hover