stephenscaff / react-animated-cursor

An animated custom cursor React component.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iFrames

jamesryan-dev opened this issue · comments

commented

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.

  1. 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.

  1. 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?

commented

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