iFrames
jamesryan-dev opened this issue · comments
When moving my animated cursor over an iFrame it stops working
Hi.
The cursor won't work inside iFrames because iframes are just an inline frame for displaying a separate doc (with it's own html/css/js/etc), and that doc is outside our control.
So, I see 2 possible solutions.
- Set iframe
pointer-events: none
.
For example, in a react app
const s = {
noPointers: {
pointerEvents: "none"
}
}
<iframe styles={s.noPointers}></iframe>
The cursor will continue to work, but of course, nothing inside the iframe will be clickable.
So, only a good solution if your iframes are purely presentational.
- Kill the cursor when it goes over iframes.
Currently the cursor will just stop at the edge of the iframe.
It's probably better to just kill it off, remove styles and cancel events. Then restart stuff again once we renter the doc.
I'll think about how to make this behavior optional, or at last provide a method for destroying the cursor.
Thoughts?
Yeah this sounds great - good luck with it all -> I decided not to use the library or a custom cursor in the end as with the iFrame heavy site it just didn't make sense - thankyou for responding tho