androidgoogle-chromenestjscocoscreator

Cannot scroll in webpage displayed in iframe when Android phone locked rotation


We have a web page opened in Chrome browser in an Android phone. In that web page, we have an iframe which load another page. When we disable rotation of the Android phone, and use transform: rotate: (90 deg) in our main web page, the page displayed in iframe behave strangely: when scroll vertically, it scrolls horizontally and vice versa. Please help!

We want to be able to scroll normally in the iframe


Solution

  • It's taken days to debug but we finally found the reason: using fastify/helmet in nestjs cause the issue. Our children site (which loaded in iframe) coded in nestjs with helmet registered. Helmet affects Access Control Origin of the children page and causes the problem.