I'm experiencing issues when I try to view a Framer prototype embedded in an <iframe> in Safari or Chrome on a mobile device (issues best seen by using a tablet).
Scenario #1 - The <iframe> is NOT inside an enclosing <div>.
If I'm viewing in Portrait orientation, the Framer is positioned properly but the <iframe> itself is wider and higher than the Framer. If I switch to Landscape orientation and reload the page, the whole page kinda blows up with the <iframe> filling the viewport and no Framer in sight.
Scenario #2 - The <iframe> is inside an enclosing <div>.
If I'm viewing in Portrait orientation, all looks good. If I switch to Landscape orientation and reload the page, the Framer prototype is shifted up and to the left inside the <iframe>.
Scenario #3 - Two <iframe> tags on the same page - the first one with an enclosing <div> and the second one without a <div>.
In Portrait orientation, the first <iframe> displays the Framer properly, but the Framer is nowhere to be seen in the second </iframe>. In Landscape orientation the first <iframe> displays the Framer offset up and to the left. In the second <iframe>, the Framer is still nowhere to be seen.
Control Scenario - Two <iframe> tags on the same page - the first one with an enclosing <div> and the second one without a </div> AND a simple HTML page referenced in each instead of a Framer prototype.
You'll notice that there are no issues with either the size of the <iframe> or its contents in either Portrait or Landscape orientation, which leads me to believe that the Framer page is partly the cause of the various issues seen in Scenarios #1, #2 and #3.
Everything works as expected in a desktop browser, so it seems to be the combination of a Framer page with an iOS browser.
Any ideas or solutions?