Iframe Изменение размера вызывает мерцание при использовании различного происхождения ⇐ Html

[Anonymous]

Мне нужен совет о том, как избежать мерцания iframe при изменении размера. Чтобы отобразить пузырьковый компонент, мне нужно было бы изменить размер контейнера iframe. Поэтому, чтобы перенести изменение состояния от компонента iframe в окно родителя, я делаю это так: < /p>

Код: Выделить всё

const onMouseOver = useCallback(() => {
window.parent.postMessage({ isBubble: true }, '*');
}, [])
< /code>
И в родительском окне я слушаю изменение состояния, как это: < /p>
// append iframe to parent window body
var iframe = document.createElement('iframe');
iframe.src = 
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';
}
}
< /code>
Сначала я думал, что проблема мерцания связана с тем, что iframe не загружается должным образом. < /p>
Я попробовал все упомянутое решение о том, как это Исправьте хромированное мерцание на перезагрузке страницы iframe. Но ничто из этого не работает. 
Я подозреваю, что проблема мерцания возникает только при изменении размера, потому что когда я использовал статический размер iframe, компоненты пузырьков всплывают правильно без проблем. 
Редактировать: я обнаружил, что проблема мерцания возникает только тогда, когда я указываю iframe на различное происхождение. Пример   

, но работает нормально, если он использует одно и то же происхождение

Подробнее здесь: https://stackoverflow.com/questions/723 ... ent-origin