rendering issues with Safari 17 and same origin iframe #461

magaldima · 2024-09-17T17:09:42Z

I have a situation where we are embedding a Zoid component within a same-origin iframe src=about:blank. When I attempt to render the component using render("body", IFRAME) the component renders successfully on Chrome 128 and on Safari <17 but does NOT render on Safari v17.

I've been trying to dig through the Safari 17 Release notes but I can't determine exactly what the change is that causes this.

This is the local setup you can use to re-create the issue:

iframe2.html

<!DOCTYPE html>
<html lang="en" style="overflow: hidden">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Same-Origin iFrame Content</title>
    <script>
        (function() {
            const originalPostMessage = window.postMessage;
            window.postMessage = function(...args) {
                console.log('postMessage called with:', args);
                return originalPostMessage.apply(window, args);
            };
        })();
    </script>
</head>

<body style="height: 100vh">
    <iframe id="dynamicFrame" src="about:blank"
        style="display: block !important; margin: 0 !important; width: 50% !important; height: 100vh !important; position: fixed; top: 0; right: 0; border: none;"
        allowpaymentrequest="true" allow="payment"></iframe>

    <script>
        // Function to fetch the content of index.html
        async function fetchIndexContent() {
            try {
                const response = await fetch('index.html');
                return await response.text();
            } catch (error) {
                console.error('Error fetching index.html:', error);
                return '<p>Error loading content</p>';
            }
        }

        // Function to inject content into the iframe
        // This works for Chrome and Safari
        async function injectContentSuccessfully() {
            const iframe = document.getElementById('dynamicFrame');
            const content = await fetchIndexContent();

            // Use srcdoc attribute for Safari compatibility
            iframe.srcdoc = content;

            // Fallback for older browsers that don't support srcdoc
            if (!('srcdoc' in iframe)) {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                iframeDoc.open();
                iframeDoc.write(content);
                iframeDoc.close();
            }
        }

        // Function to inject content into the iframe contentDocument
        // This works for Chrome but does not work for Safari
        async function injectContent_DoesNotLaunch() {
            const iframe = document.getElementById('dynamicFrame');
            const content = await fetchIndexContent();

            // Get the iframe's document object
            let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            // Write content to the iframe
            iframeDocument.open();
            iframeDocument.write(content);
            iframeDocument.close();
        }

        // Call the function to inject content when the page loads
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', injectContentSuccessfully);
        } else {
            injectContentSuccessfully();
        }
    </script>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoid Component Playground</title>
</head>

<body style="background-color: #f0f0f0;">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            height: 100%;
            height: -webkit-fill-available; /* WebKit browsers (iOS Safari, etc.) */
            background-color: lightblue;
        }

        .playground {
            padding: 1rem;
            text-align: center;
        }

        @supports (-webkit-touch-callout: none) {
            body {
                min-height: -webkit-fill-available;
            }
        }
    </style>
    <div class="playground" style="background-color: #f0f0f0;">
        <zoid-component></zoid-component> <!-- REPLACE THIS LINE WITH YOUR ZOID COMPONENT -->
    </div>
    <!-- This script includes the zoid component and the zoid library -->
    <script type="module" src="./src/main.ts"></script>
</body>

</html>

Another question I had while I was trying to investigate this:

Is it possible to render the zoid component to the window.parent using renderTo ? It seems like since the code is being run from an iframe on the same domain as the parent/top window, I should be able to do this since it's not cross-origin. However, when I do this the component never finishes fully rendering. I see the RENDER and DISPLAY events fire successfully, but the RENDERED event is never received. In particular, I eventually see the following error in the console:
Error: No ack for postMessage ce2() in http://localhost:3030 in 10000ms (localhost:3030 is the zoid component URL). Is there something I'm missing here?

The text was updated successfully, but these errors were encountered:

magaldima changed the title ~~renderTo parent window not working with same origin iframe~~ rendering issues with Safari 17 and same origin iframe Sep 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rendering issues with Safari 17 and same origin iframe #461

rendering issues with Safari 17 and same origin iframe #461

magaldima commented Sep 17, 2024 •

edited

Loading

rendering issues with Safari 17 and same origin iframe #461

rendering issues with Safari 17 and same origin iframe #461

Comments

magaldima commented Sep 17, 2024 • edited Loading

magaldima commented Sep 17, 2024 •

edited

Loading