Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Render into iframe

See original GitHub issue

When a motion.div (or any motion component) is rendered into an iframe, the following invariant fails:

invariant(ref.current instanceof Element, "No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`");

Although ref.current is also an Element, it’s an Element from another window. Thus it doesn’t belong to the same prototype chain as the one referenced in above codeinstanceof Element.

A possible solution is to use ref.current.constructor.name? Or remove the invariance?

https://codesandbox.io/s/framer-motion-iframe-bug-x7ud9

Issue Analytics

State:
Created 4 years ago
Reactions:9
Comments:16 (3 by maintainers)

Top GitHub Comments

1reaction

james2406commented, Oct 25, 2020

Can this issue be reopened please?

1reaction

sivakumar-kailasamcommented, May 1, 2020

@InventingWithMonster Any suggestions/directions for anyone interested in raising a PR for this?

Top Results From Across the Web

Bug: Rendering content inside an iFrame using createPortal ...

I'm trying to render JSX content inside an iFrame using createPortal. It works fine in Edge, Chrome, but in Firefox the iframe body...

React-app renders an Iframe and it causes bug, How to delete ...

In the app, an Iframe is rendered in HTML and it gets some ridiciolus z-index value and covers whole the page.

React, Iframes, and a Back-Navigation Bug

In this post, we'll fix a bug where iframes in React interfere with your browser's back-navigation. Skip table of contents. Table of Contents....

HTML renderer can't render an iframe | Voters

When trying to open a page with HTML renderer that has an iframe, the app crashes to a red screen. https://forums.appgyver.com/t/error-in-html-renderer-while- ...

Best practices for React iframes - LogRocket Blog

When a resource is rendered in an iframe, it functions independently of the parent component where it is embedded. Therefore, neither the parent ......