iFrame Embed | After Deselecting Input Page Scrolls To Top

[sales6]

Hello Everyone,

I am trying to host my Bubble App on my Shopify Webpage. It’s currently embedded in an iFrame using iFrame Resizer to change the iFrame Height when the content changes. I have turned this off and the Bubble App sends HTML Code to Shopfiy to initiate the resizes. That is all working fine.

The issue that I am having is that when I select any input, type some text and de-select the input the page will automatically scroll to the top of the iFrame. What is causing this behavior? I can not figure it out?

It seems to be happening on macOS in Mozilla and Chrome as well as iOS Safari. Makes the user experience very frustrating.

I have tried isolating the iFrame Resizer as well as the other elements, when I embed the Bubble App in a Simple iFrame the problem still persists. If the Bubble App runs standalone (ie. in Bubble natively) the issue doesn’t seem to be there, so I’m think it’s something to do with the iFrame or Shopify.

The code that I am using to HTML Emded the Bubble App on my site is as follows:

<script src="https://cdn.shopify.com/s/files/1/2691/1130/files/iframeResizer.min.js?140"></script>

<script const="" iframes="iFrameResize(" selector=""></script>

<style>
  iframe {
    width: 1px;
    min-width: 100%;
border:0px;
  }
</style>

<iframe id="myIframe" src="https://ssd-order.bubbleapps.io"></iframe>

<script>
  iFrameResize({ log: true, autoResize: false, heightCalculationMethod: 'taggedElement', checkOrigin: false, tolerance: 72 }, '#myIframe')
</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Any help you can offer would be appreciated!

Thank you!

[sales6]

The code that I am using to HTML Emded the Bubble App on my site is as follows:

<script src="https://cdn.shopify.com/s/files/1/2691/1130/files/iframeResizer.min.js?140"></script>

<script const="" iframes="iFrameResize(" selector=""></script>

<style>
  iframe {
    width: 1px;
    min-width: 100%;
border:0px;
  }
</style>

<iframe id="myIframe" src="https://ssd-order.bubbleapps.io"></iframe>

<script>
  iFrameResize({ log: true, autoResize: false, heightCalculationMethod: 'taggedElement', checkOrigin: false, tolerance: 72 }, '#myIframe')
</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

[tona]

Where did you put the js script in your bubble page? This is the script I’m referring to - " The second file (iframeResizer.contentWindow.min.js) is a native JavaScript file that needs placing in the page contained within your iFrame. This file is designed to be a guest on someone else’s system, so has no dependencies and won’t do anything until it’s activated by a message from the containing page ."