Shopify Inbox started a war with my hero animation

[AVR1]

This is a re-post of my original post in the Shopify Design forum, but I think it is better situated here.

Our store has a custom hero section, which contains two Adobe animations in iframes. One displays for landscape orientation clients, and the other for portrait.

We've been using this section template for over a year now, and it has been essentially unchanged since it was first designed. The HTML source of each animation is an interpolated string, so that the external JS assets can be added, and the string becomes the srcdoc of an iframe. It always just worked, until this year.

Recently, I noticed that the Shopify Inbox chat widget is inserting its own code into my iframe (and after it), and breaking the animations. Any JavaScript after the closing backtick of the first string is just spat out, below the shopify-section-template-- div itself.

With Inbox enabled, there is a JavaScript error about a backtick string not being terminated, but the backticks within the custom section itself are most certainly closed and in the right places.

As soon as the Inbox product is deactivated, the problem ceases, and the animation works. I have tried changing the class names and IDs of my elements in the custom section, so it's not that. I have also tried escaping the slashes in the closing HTML tags, inside the interpolated strings. You can see it live and working (in March, 2024), without Shopify Inbox here: https://www.avrevolution.com.au/

Before March, 2024, we last used our animation template until Christmas, 2023, so the timing of the breaking change is possibly corroborated by the 25th January comment by @jamescress on this (probably unrelated) post.

I don't know what I could possibly do about it, and Shopify Support has declined to create a bug report, so I'm hopeful that someone here will have some answers. Until then, no Shopify Inbox.

Thanks!

====

The section code in question:

<!-- Begin Hero Animation Section -->

<section id="hero-section">

    <iframe class="hero-banner" id="desktop-hero"></iframe>

    <iframe class="hero-banner" id="mobile-hero"></iframe>

</section>

<script type="text/javascript">

    const desktopScriptURI = "{{ 'animation-javascript-desktop.js' | asset_url }}";
    const mobileScriptURI = "{{ 'animation-javascript-mobile.js' | asset_url }}";

    const desktopHero = document.getElementById('desktop-hero');
    const mobileHero = document.getElementById('mobile-hero');
  
    const desktopIframeContent = `
        <!-- 
            Full HTML document, including HTML tags and a doctype declaration goes
            here, with the external JavaScript asset added: ${desktopScriptURI};
            Note that closing script tags must be escaped.
        -->
    `;

    const mobileIframeContent = `
        <!-- 
            Full HTML document, including HTML tags and a doctype declaration goes
            here, with the external JavaScript asset added: ${mobileScriptURI};
            Note that closing script tags must be escaped.
        -->
    `;
  
    desktopHero.srcdoc = desktopIframeContent;
    mobileHero.srcdoc = mobileIframeContent;
  
</script>

<!-- End Hero Animation Section -->

{% schema %}
  {
    "name": "Hero Animation",
    "settings": [],
    "presets": [
      {
        "name": "Hero Animation",
        "category": "Hero Animation"
      }
    ]
  }
{% endschema %}

The broken up document root of the first iframe, where the remainder of the JavaScript from the first closing backtick loads outside the Shopify section: