I need an advise on how to avoid iframe from flickering when resize. I wanted to display bubble components within iframe when iframe is hovered. To display the bubble component, I would need to resize the iframe container.

The iframe source was built using react framework. So to pass the state change from iframe component to parent window, I'm doing it like this:

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

and in parent window, I'm listening to the state change like this:

// 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';
 }
}

At first, I thought the flickering issue is because of iframe is not loaded properly.

I have tried all of the solution mentioned in how to fix chrome flicker on iframe page reload. But none of it is working.

I'm suspecting the flickering issue comes only when resize, cause when I used static iframe size, the bubble components popup properly without any issue.

edit: I found out the flickering issue happen only when i'm pointing iframe to different origin. Example <iframe src="https://different origin"></iframe> but working fine if it is using same origin