Context

I'm trying to embed an iframe within another page (different domains)
The embed code looks like this:

<script type="application/javascript" src="[...]/myTopScript.js"></script>
<iframe src="differentDomain/somePage.html" frameborder="0" allowfullscreen width="100%"></iframe>

I'm responsible for iframe content and myTopScript.js
There is another script within the iframe (lets call it myInnerScript.js)

TL;DR: iframe height is always superior to its content height (no scroll inside)

Whenever my iframe content height change I'm sending a message to the parent window (via window.parent.postMessage) to provide the new height to myTopScript.js. The top script will then catch the message and update my iframe height property to newHeight + 1px.

This way my iframe never needs a scrollbar and looks like any other part of the host website.

Issue

I can't scroll the parent page (with the mouse wheel) when the mouse is over the iframe.

• I tried setting overflow:hidden on iframe <body> tag
• I tried setting scrolling="no" (deprecated) on iframe but it does nothing
• I can't set pointer-events:none on the <iframe> because I need mouse events inside the iframe (click at least)
• I noticed that when the host webpage is on the same domain I don't have the issue, but I can't find any iframe attribute that would enable this "scroll-bubbling" feature

Do you have any spec reference or document explaining this ? And ideas on what else I could try ?

I thought about forwarding mousewheel events via postMessage but I'm pretty sure this would not be reliable