Ionic 4 ion-content iframe with external site using sticky header

#1

Hello,

I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe “height:100%” actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:

Component for Tab HTML

<ion-content >
  <div class="iframe-fix">
<iframe
    [src]="myurl"
    frameborder="0"
    webkitallowfullscreen
    mozallowfullscreen
    allowfullscreen
  ></iframe>
</div>
</ion-content>

From the forums I found a few tricks that should work, and created this css file that I include in the index.html:

.iframe-fix iframe {
  -webkit-overflow-scrolling: touch !important;
  overflow: scroll !important;
  width: 100%;
  height: 100%;
  border: none;
  margin-top: 40px;
}

.iframe-fix {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #fff;
}

Would appreciate any help/suppport. Thanks!!

#2

So is what I am trying to do not possible? Or perhaps not clear from my post… lol…