click through sticky, transparent iframe

Question

I have a webpage where the bottom part is occupied by an iframe that I made transparent to view the overlapped elements.

Although the transparency is working well, the overlapped links are not clickable unless I switch pointer-events to none in the iFrame (which obviously solves the problem by another). I tried making a div into the iFrame, covering the "menuless" part, with pointer-events set to all but it doesn't seem to work. I also have to keep in mind the chat component is sticky.

Answer 1

This question is old, but for anyone who stumbles across it...

1. iFrames represent another entire DOM wrapped in the parent DOM. Things like CSS pointer-events don't typically work on iFrames or function the same way across browsers.

2. You can try to impact all content INSIDE the iframe using iframe > * {pointer-events: none;} but if the iframe content crosses domains, it likely won't work.

3. pointer-events: all; is intended to work with SVGs only not other DOM elements.

The proper solution for the OP is to either scale the iFrame to only the size of the content OR don't use an iFrame at all.

Other options to embed content:

1. HTML <embed> - Docs

2. HTML <object> - Docs

3. Web Components HTML Imports - Recently deprecated but there's a polyfill

None of these are great solutions but depending on the problem they may work.

Finally, you can use a Javascript call to fill the content of an element with external content. This is essentially what "Single Page" Apps built using React/Angular/Vue are doing behind the scenes. Note: If you go this route be sure to pay attention to CORS headers if the content is coming from a different domain.