Merge pull request #622 from AiursoftWeb/probeFile

fix: prevent blocking items when using ios safari
AiursoftWeb · Aug 8, 2019 · 3c62092 · 3c62092
2 parents 258f846 + 245314b
commit 3c62092
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/app/Controllers/app.component.ts b/src/app/Controllers/app.component.ts
@@ -16,6 +16,8 @@ import { MessageService } from '../Services/MessageService';
 
 export class AppComponent implements OnInit, AfterViewInit {
 
+    public iosHeightFix = false;
+
     constructor(
         private initService: InitService,
         private elementRef: ElementRef,
@@ -31,6 +33,13 @@ export class AppComponent implements OnInit, AfterViewInit {
         Swal.close();
     }
 
+    @HostListener('window:resize')
+    onResize() {
+        // in safari and the address bar is shown...
+        this.iosHeightFix = window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform) &&
+            document.body.scrollHeight - window.innerHeight >= 50;
+    }
+
     @HostListener('window:load', [])
     onLoad() {
         if ('Notification' in window && 'serviceWorker' in navigator) {
@@ -65,7 +74,6 @@ export class AppComponent implements OnInit, AfterViewInit {
         // disable body scroll for ios
         if (window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform)) {
             this.homeService.updateIosDisableScroll();
-
             new MutationObserver(() => {
                 this.homeService.updateIosDisableScroll();
             })

diff --git a/src/app/Views/app.html b/src/app/Views/app.html
@@ -5,7 +5,9 @@
 </div>
 <div id="contentWrapper" class="content-wrapper" *ngIf="!(route.isActive('/home', false) && homeService.wideScreenEnabled)"
      [class.in-widescreen]="homeService.wideScreenEnabled">
+    <div style="height: 50px" *ngIf="iosHeightFix"></div>
     <router-outlet></router-outlet>
+    <div style="height: 50px" *ngIf="iosHeightFix"></div>
 </div>
 <!-- Show an empty component when no reasonable component to show. -->
 <div class="content-empty" *ngIf="route.isActive('/home', false) && homeService.wideScreenEnabled && messageService.me">