Streaming live at 10am (PST)

Multiple iframes on Mobile Chrome Browser not Loading Completely

#1

Hey Ya’ll,

I created a page on my site that pulls in iframe snippets from codepen and dynamically styled them through the HTML Embed block manipulating the height. What’s happening is that on Chrome and Safari (mobile), the page won’t fully load/render and the page freezes.

The page I’m referring to is “Individual Designs” or /individual-designs.

Any pointers on why this is the case?

Here’s the sharelink:
https://preview.webflow.com/preview/kvcode?utm_source=kvcode&preview=21bd37c2817a40c8628bf7751fb99335

Thanks!!


Here is my site Read-Only: https://preview.webflow.com/preview/kvcode?utm_source=kvcode&preview=21bd37c2817a40c8628bf7751fb99335
(how to share your site Read-Only link)

#2

Can you make a screen recording of your problem? I don’t see it on android/chrome.

#3

Sure thing!

*On Chrome, once I navigate to the “Individual Designs” page, it partially renders the page and then freezes. If I try to reload the browser, the screen grays out and won’t reload.

*On Safari, once I navigate to the “Individual Designs” page, it partially renders the page even more and brings in one of the iframe sections and then freezes.

I’m using an iPhone X with version: 12.1.4 (16D57)

Thanks for the help!

#4

@David_Sheltren - In order to isolate the issue, test to see if you get the behavior you want on a very simple page with no other elements. I know that codepen embeds are responsive, so I suspect there is an issue with the layout.

#5

Thanks @webdev for the feedback. I went ahead and stripped the iframes from the CMS and removed all elements on the page.

I also ran the test on mobile and it still appears to have issues.

Super weird that it works on desktop just fine but doesn’t render on mobile…

#6

Here’s the backstory on why I’m embedding the iframes this way. My clients are paying for custom code for their site. That code has to be created (which is why I use Codepen as my sandbox). Im pushing in each design from Codepen as a product that will dynamically populate within my webflow site so that as I create new designs, I can just add the Codepen live preview URL into my CMS and add in the dynamic height of each design.

Can anyone reading this suggest another way of implementing this?

Thanks!

#7

The amount of errors in the console could be the source of your problems.

CloudApp

#8

@webdev - Update! There was another way to embed pens besides through iframe :fire:

Made the change and got rid of those errors… back in business. Thanks for the help!

#9

@David_Sheltren - Great! Glad to see you solved your issue. Mind sharing the other method you used? Might help others with a similar problem.

#10

For sure! Within Codepen, you can choose to embed your pens via iframe or html. I chose the html method and setup a dynamic cms item for the hash ID for the pen as well as the height.

Happy to answer anything anyone has if interested :slightly_smiling_face: