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!