<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            margin: 20px;
            display: block;
        }
        
        .wrapper {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            z-index: 0;
            left: 60px;
            top: 10px;
        }

        .wrapper.visible {
            opacity: 1;
            visibility: visible;
        }
    </style>
    <script>
        function doVisibilityChange()
        {
            document.querySelector('.wrapper').classList.add('visible');
        }

        const expectedLoads = 2;
        let receivedLoads = 0;
        function frameLoaded()
        {
            if (++receivedLoads == expectedLoads)
                window.parent.receivedLoad();
        }
        
        window.addEventListener('load', () => {
            frameLoaded();
        }, false);
    </script>
</head>
<body>
    <div class="wrapper">
        <div style="padding: 10px; position: fixed; top: 0px; left: 0px; background-color: magenta">fixed</div>
        <iframe id="inner-frame" scrolling="no" width="400" src="become-composited.html"></iframe>
    </div>
    <script>
        document.getElementById('inner-frame').addEventListener('load', () => {
            frameLoaded();
        }, false);
    </script>
</body>
</html>