iFrame contents resizing only on WebFlow


i have a web application outside of WebFlow that i’m trying to include into my WF site via an iframe.

on a desktop browser, the site looks and works perfectly fine.

however on mobile, it the iframe content has been scaled up to 200%.

the application lives at: https://mapapp.digitaldemocracyproject.org/ddp-mapapp/
and the WF site is: Digital Democracy Project | Voting Results

it almost seems like the mobile browser is loading a landscape version of the application in the iframe, even when the phone is oriented to portrait.

things i’ve tried:

  • created a test page outside of WF with the same iframe element and attributes. it works as expected.
  • created a blank WF site with only this iframe embed. it demonstrates the same behavior.
  • added variations of -webkit-transform: scale(1) !important; to the iframe and to the page. no change.

i’m at a loss. it seems like nobody else in the forums is having this issue, but i don’t know what to change :confused: any help is greatly appreciated!

some other notes:

it looks like this is happening because somehow WebFlow is forcing the iframe content to load in landscape orientation. i’ve changed my mobile media query to @media only screen and ((orientation: portrait) or (max-width: 450px)). somehow on WebFlow, the max-width must be > 450px even though i’m on a device with a 390px wide screen. loading the same iframe outside of WebFlow, i see the page correctly. how is this even possible?