New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 833575 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Investigate relationship between CSS/SVG filters and hit testing

Project Member Reported by kenrb@chromium.org, Apr 16 2018

Issue description

In the context of the IntersectionObserver v2 proposal, there has been discussion about the relationship between an element's layout position with respect to hit testing and its position with respect to drawing. Typically these are expected to be the same, on the basis that users intend to interact with the thing that they see below the mouse cursor.

For IOv2, the hope is that we can detect visual occlusion by hit testing some number of pixels of an element.

Unfortunately CSS and SVG filters break this relationship, because they affect visual appearance but not input events.

Here is an example of a div (the red box) that has a hit test area entirely disjoint from where it appears on the screen: http://jsbin.com/coziqokogi/3/edit?html,css,output

IOv2 can signal if an iframe has a filter applied to it, but we run into trouble if another element elsewhere on the page has a filter that causes it to occlude the iframe. It might be possible to account for filters in IOv2 hit testing, but that would be a divergence from how input currently works.
 
Components: -Blink>Paint Blink>HitTesting
I seem to recall the specs around filters always surprising me in that they require the use of unfiltered positions etc for things like overflow and hit testing. Maybe we need to view this as a spec improvement issue.
This example is just a bug. The hit test result should not be different than the
painted result. e.g. on this example:

http://jsbin.com/yozinowaju/edit?html,css,output

Clicking the white area above the red box should not show an alert box.

On Firefox there is no hit test result at all (not sure if they just bail on
SVG filters?). Edge doesn't support SVG filters.

Cc: nasko@chromium.org
Chris, Stefan: This represents a problem with the Intersection Observer v2 goals, does it not? Is there any thought of trying to change this behavior in the near term?

CSS filters still somewhat break IO, because there can be occlusion by things like drop shadows or blur without that being detectable, but that is not as clearly exploitable as SVG translate filter.

Sign in to add a comment