Mouseout inside iframe not always detected

I've put a button right at the bottom. On mouseover on that button an object should appear at the bottom. And on mouseout it should disappear again. Pretty straightforward. I wrote this code for it:

var frequency = 20;
stage.enableMouseOver(frequency);
var target = this.mybtn;
canvas.style.cursor = "pointer";
target.addEventListener("mouseover", gotoMouseOver);
target.addEventListener("mouseout", gotoMouseOut);
function gotoMouseOver(e){
target.gotoAndStop("on");
}
function gotoMouseOut(e){
target.gotoAndStop("off")
}

By itself it works perfectly. When I hover over the green button the purple rectangle appears and on mouseout it disappears again.

The problem is when I put this html file inside an iframe. Because the green button is right at the bottom right a mouseout on it isn't always detected. So on mouseover the purple rectangle appears but on mouseout it not always disappears.

The file is instended to be use for an online ad so it will have to be used for inside an iframe. I know I could have an eventlistener set on the canvas instead, but I wish it to be only on the button this time. It is meant for a disclaimer to appear so it should appear when I hover over the rest of the banner. Just when I hover over the bottom right button.

I also tried to check for the stage bounds so I could check if the cursor is over and out of the stage, but inside an iFrame that didn't work either. When I move the cursor quickly outside the banner to outside the iframe it doesn't always see that the cursor is outside the stage

Does anyone have a workaround for this?