How can you make an iframe have pointer-events: none; but not on a div inside that?

Issue

I have an iframe with an inherited pointer-events: none; but when I have inserted a <div> inside the iframe with a pointer-events: auto; the div won't react to clicks or any mouse hover events.

The reason for this is that the iframe is inside a <div style="position:fixed;"> so it is kind of like a little menu. But I would like the user to click through the iframe, but not through the links and divs in the iframe.

And yes, it absolutely needs to remain an iframe.

How could I bypass this? Can I even bypass this?

Here's a simple example: jsfiddle.net/MarcGuiselin/yLo119sw/2

Edit 2023:

Geez, time sure does fly by haha. What I wanted to do originally can now be achieved via the shadow dom. (Supported in 97% of browsers)

This allows chrome extensions or scripts to inject their css styles into a page, without accidentally changing the style of the website. For example, a chat support script like Zendenk, which injects it's own menu inside a website, must take care to not break the website itself:

PS: Zendesk technically uses an iframe since it's just a rectangular menu, but you get my point.

Solution

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.

Answered By - Lewis