- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Mon, 21 Oct 2019 21:00:03 +0000
- To: public-svg-issues@w3.org
AmeliaBR has just labeled an issue for https://github.com/w3c/svgwg as "Agenda+": == 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. See https://github.com/w3c/svgwg/issues/744
Received on Monday, 21 October 2019 21:00:05 UTC