On my ts i have ngOnInit(): void {" /> On my ts i have ngOnInit(): void {" /> On my ts i have ngOnInit(): void {"/>

100vh doesnt work properly on Safari iOS "Single tab" configuration

17 Views Asked by At

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

0

There are 0 best solutions below