<style>
body {
    margin: 0;
    padding: 0;
}
iframe {
    border: none;
    background-color: red;
}
div {
    display: inline-block;
}
.filtered {
    filter: url(#noop);
}
.wrapper {
    width: 300px;
    height: 150px;
    overflow: hidden;
}
.scroll {
    width: 50px;
    height: 50px;
    overflow: hidden;
    transform: scale(20);
}
svg {
    display: none;
}
</style>

<p>Cross origin with transform (must have http server running)</p>
<div class="wrapper">
    <div class="scroll">
        <iframe src="http://localhost:8000/css/resources/solid-green.html"></iframe>
    </div>
</div>

<div class="wrapper filtered">
    <div class="scroll">
        <iframe style="background-color: white" src="http://localhost:8000/css/resources/solid-red.html"></iframe>
    </div>
</div>

<svg>
    <defs>
        <filter id="noop">
            <feMorphology operator="dilate" in="SourceGraphic" radius="0"/>
        </filter>
    </defs>
</svg>