What we want is not allowed by the spec, at least not with an absolutely positioned iframe.
We’re all wanting to do the same thing:
- Render a container (typically for a Chrome extension), positioned over the page and filling the viewport
- Disallow not allow the container itself from capturing pointer events
- Allow the container’s children to capture pointer events
This lets us “click through” the absolutely positioned box, but still interact with its children, which may be buttons or just boxes with hover events or whatever.
We can achieve this behavior if and only if the boxes share the same document. Disabling pointer events for an absolutely positioned iframe disables them for all of its children.
An alternative approach is rendering the content directly into the document, i.e. into a Shadow DOM for styles sandboxing. This is the only way to achieve this behavior as we are looking for it, and was how I previously approached the problem before trying to refactor to an iframe and finding it can’t be replicated this way.
See https://iframe-pointer-events.vercel.app for a demo.