search

ryanseddon / react-frame-component

Render your React app to an iFrame
http://ryanseddon.github.io/react-frame-component/
MIT License
1.75k stars 156 forks source link

Content inside iframe fails to render when fixed element is present and height & width are set to 100% #249

Open Oudwins opened 1 year ago

Oudwins commented 1 year ago

Obligatory notice: I am still quite new to all this... Sorry for my ignorance in advance.

Description of the issue The content inside of the iframe fails to render when using nextjs

When the issue occurs There might be more cases, but I have identified that the issue occurs when there is a fixed positioned element outside the iframe and the iframe height & width is set to 100% when using nextjs

Minimal sandbox https://stackblitz.com/edit/stackblitz-starters-blgci5?file=app%2Fpage.tsx

Am I willing to submit a PR Potentially but I have no idea what is happening so if someone could at least point me in the right direction I would appreciate it.

Oudwins commented 1 year ago

Upon further testing, this seems like it might be related to nextjs SSR. The issue seems to be fixed if you force the entire component or page to load on the client

edge-rps commented 8 months ago

Obligatory notice: I am still quite new to all this... Sorry for my ignorance in advance.

Description of the issue The content inside of the iframe fails to render when using nextjs

When the issue occurs There might be more cases, but I have identified that the issue occurs when there is a fixed positioned element outside the iframe and the iframe height & width is set to 100% when using nextjs

Minimal sandbox https://stackblitz.com/edit/stackblitz-starters-blgci5?file=app%2Fpage.tsx

Am I willing to submit a PR Potentially but I have no idea what is happening so if someone could at least point me in the right direction I would appreciate it.

Thank you for reporting @Oudwins I had the same issue with NextJS Static, I switched my project to use Vite React and that fixed the problem.

Oudwins commented 8 months ago

Oh man. This was so long ago I don't even remember if I fixed it or what.... good to know of a work around though.