Search code examples
javascriptjqueryhtmladobe-edge

Adobe Edge Firefox iframe error


I have a animation using Adobe Edge 6. I'm trying to include the animation inside an iframe. The code works well on Chrome and IE 10. But on Firefox I'm getting a javascript error on Adobe Edge library TypeError: C.getComputedStyle(...) is null -> edge.6.0.0.min.js Line-77.

If I open the animation page on Firefox 43 it's working well, I'm only getting the error when including the animation inside an iframe.

Animation page:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Untitled</title>
    <!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="/Scripts/edge.6.0.0.min.js"></script>
    <style>
        .edgeLoad-EDGE-1689000111 {
            visibility: hidden;
        }

        div {
            position: absolute !important;
        }
    </style>
    <script>
        AdobeEdge.loadComposition('Test', 'EDGE-1689000111', {
            scaleToFit: "both",
            centerStage: "none",
            minW: "0",
            maxW: "undefined",
            width: "870px",
            height: "350px"
        }, { dom: [] }, { dom: [] });
    </script>
    <!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0">
    <div id=" stage" class="EDGE-1689000111">
    </div>
</body>
</html>

The iframe using the animation page:

<iframe class="embed-responsive-item" frameborder="0" src="PATH"></iframe>

Solution

  • I have faced the same issue some days ago. One of the possible reasons is "display:none" rule on the iframe (or one of its parent nodes). This may cause an error even if "display" rule is set to "block" later.

    Here is the related issue at bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=548397

    Could you check if the iframe (or its parents) has "display:none" at the time when it first appears in DOM?

    Now we are going to set "opacity:0" or "visibility:hidden" instead of "display:none".