react-frame-component
react-frame-component copied to clipboard
ryanseddon
Content inside iframe fails to render when fixed element is present and height & width are set to 100%
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.
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
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.
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.