[svgwg] Clarify behavior of pointer-events on nested elements (#744)

yi-gu has just created a new issue for https://github.com/w3c/svgwg:

== Clarify behavior of pointer-events on nested elements ==
Link to the spec: https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty

The spec does not mention how the pointer-events property in descendants [gets inherited from] or [overrides] the one from their ancestor. e.g.
```
<div id='parent' style='pointer-events: none'>
  <div id='child'></div>
</div>
```
In this example, the `pointer-events` property in the `child` is inherited to be `none`. However, when the elements are `iframe`s:
```
<iframe id='parent' style='pointer-events: none' src=''>
  <iframe id='child' src=''></iframe>
</iframe>
```
The `pointer-events` property does not get propagated.

If the nested element has its own `pointer-events` property, the behavior is also inconsistent between divs and iframes. e.g.
```
<div id='parent' style='pointer-events: none'>
  <div id='child' style='pointer-events: auto'></div>
</div>
```
In this example, `auto` in the `child` overrides `none` from the `parent`. For iframes:
```
<iframe id='parent' style='pointer-events: none' src=''>
  <iframe id='child' style='pointer-events: auto' src=''></iframe>
</iframe>
```
`child` will **not** accept events. See example [here](https://output.jsbin.com/xokogar/quiet). This behavior makes sense because page owners will lose the control of the outer iframe if the inner one could override the decision on whether the region can accept events (especially for cross origin iframes).

It seems like the `pointer-events` propagation stops at the iframe level. In the following example:
```
<div id='parent' style='pointer-events: none'>
  <iframe id='child' style='pointer-events: auto'></iframe>
</div>
```
`child` will accept events because it overrides the property from the parent. See example [here](https://output.jsbin.com/mimedex/quiet).

The existing behavior mentioned above is consistent in Chrome, Firefox and Safari. The specification needs to clarify it.





Please view or discuss this issue at https://github.com/w3c/svgwg/issues/744 using your GitHub account

Received on Tuesday, 1 October 2019 16:36:46 UTC