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.
*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)
@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.
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?
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.
