Im loading an iframe into html, using Angular.
<div [hidden]="!show" id="idIframe" class="conteiner-iFrame">
</div>
On my ts i have
ngOnInit(): void {
this.adjustIframeDimensions();
addEventListener('resize',this.adjustIframeDimensions);
}
And my adjustIframeDimensions() is as follows:
adjustIframeDimensions() {
var browser = navigator.userAgent.toLowerCase();
if (browser.indexOf('safari')>-1 && browser.indexOf('mobile')>-1){ document.getElementsByTagName('html')[0].style.height = '100vh'; setTimeout(() => {
document.getElementsByTagName('html')[0].style.height = '100%'; }, 500);
}
}
When using Safari browser, with the default (Safari Tab Bar) the content seems right, however, when changing to "Safari Single bar", the content seems push down and a button seems cut from the view.
{Image to [Image with error in button, left Tab bar - works fine | Right- Single tab - pushes content, button cuts. ] (https://i.stack.imgur.com/8PXQh.png)}
already try a lot of configurations on my CSS
div.conteiner-iFrame {
width: 100%;
height: 100%;
height: 100vh;
height: -moz-available;
height: -webkit-fill-available;
height: stretch;
max-height: 100vh;
position: absolute;
overflow-y: auto;
background-color: #FFFFFF;
}
#idIframe {
height: 100%;
height: 100vh;
height: -moz-available;
height: -webkit-fill-available;
height: stretch;
}
Also tried using some js, without success
//fixing error in Safari
if (browser.indexOf('safari')>-1 && browser.indexOf('mobile')>-1) {
var iframe = document.getElementById('idIframe');
setTimeout(() => {
//var viewportHeight = window.innerHeight;
iframe!.style.height = `${iframe!.clientHeight}px`;
}, 500)
}
const isSafariMobile = /safari/i.test(navigator.userAgent) && /iphone/i.test(navigator.userAgent);
if(isSafariMobile) {
setTimeout(() => {
this.iframe.nativeElement.style.height = '100%';
}, 500);
}
Any thoughts?? Aprecciate