Hello guys,
I came across a pretty annoying bug that is bothering me a lot, because i need to release an app, wich includes some navigation inside an Iframe.
So, I did a full setup on the Iframe, it is working on browser when serving the project to a localhost, it works perfectly on android, but on iphone, it is just not working 100%…
If i launch the app, it will be scrollable, the home page of the iframe is working just fine… but, once i navigate on that page, the Iframe loses all of its scrolling capabilities. it is still interactive (fill forms or whatever), but the actual page inside the Iframe stops scrolling…
my code so far:
<body ng-app="starter">
<ion-pane>
<ion-content scroll="true" overflow-scroll="true" class="iframe-wrapper" id="iframe-wrapper">
<div id="ios-pane-fix" style="height: auto"></div>
<object id="iframe" type="text/html" data="http://somesite.com/afolderinthesite/" data-tap-disabled="true"></object>
</ion-content>
</ion-pane>
<script>
document.getElementsByTagName('object')[0].data=document.getElementsByTagName('object')[0].data;
</script>
<style>
.iframe-wrapper {
width: 100% !important;
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
}
.iframe-wrapper iframe, .iframe-wrapper object {
width: 100%;
height: 500px;
}
#ios-pane-fix div {
height: 20px !important;
display: block !important;
background-color: #fff !important;
}
</style>
<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS == true) {
var node = document.createElement("div");
document.getElementById("ios-pane-fix").appendChild(node);
}
</script>
</body>