Necesito un consejo sobre cómo evitar que el iframe parpadee al cambiar el tamaño. Quería mostrar los componentes de la burbuja dentro del iframe cuando se desplaza el iframe. Para mostrar el componente de burbuja, necesitaría cambiar el tamaño del contenedor iframe.

La fuente de iframe se creó utilizando el marco de reacción. Entonces, para pasar el cambio de estado del componente iframe a la ventana principal, lo hago así:

 const onMouseOver = useCallback(() => { window.parent.postMessage({ isBubble: true }, '*'); }, [])

y en la ventana principal, escucho el cambio de estado de esta manera:

 // append iframe to parent window body var iframe = document.createElement('iframe'); iframe.src = <source to my react web app> iframe.style.width = '20px'; iframe.style.height = '20px'; document.body.appendChild(iframe); // listen to message window.addEventListener('message', resizeIframe) //resize iframe method function resizeIframe(e) { var data = e.data // change iframe size if (data.isBubble) { iframe.style.width = '100px'; iframe.style.height = '100px'; } }

Al principio, pensé que el problema del parpadeo se debía a que el iframe no se había cargado correctamente.

He probado todas las soluciones mencionadas en cómo reparar el parpadeo de Chrome en la recarga de la página iframe . Pero nada de eso está funcionando.

Sospecho que el problema del parpadeo surge solo cuando se cambia el tamaño, porque cuando utilicé el tamaño de iframe estático, los componentes de la burbuja aparecen correctamente sin ningún problema.

editar: descubrí que el problema del parpadeo ocurre solo cuando apunto iframe a un origen diferente. Ejemplo <iframe src="https://different origin"></iframe> pero funciona bien si usa el mismo origen