Fix layout for iOS Safari on auth pages

src/index.hbs

@@ -29,8 +29,9 @@
   
   <div class="whole" id="auth-pages" style="display: none;">
     <div class="tabs-container auth-pages__container" data-slider="tabs">
-      <div class="page-sign scrollable scrollable-y">
+      <div class="page-sign">
         <div class="container center-align">
+          <div class="scrollable scrollable-y">
             <div class="auth-image">
               <svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
                 <use href="#logo" />
@@ -57,8 +58,10 @@
             </div>
           </div>
         </div>
-      <div class="page-signQR scrollable scrollable-y">
+      </div>
+      <div class="page-signQR">
         <div class="container center-align">
+          <div class="scrollable scrollable-y">
             <div class="auth-image">
               <canvas id="qr-code"></canvas>
             </div>
@@ -67,8 +70,10 @@
             <div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
           </div>
         </div>
-      <div class="page-authCode scrollable scrollable-y">
+      </div>
+      <div class="page-authCode">
         <div class="container center-align">
+          <div class="scrollable scrollable-y">
             <div class="auth-image"></div>
             <div class="phone-wrapper">
               <h4 class="phone"></h4>
@@ -83,8 +88,10 @@
             </div>
           </div>
         </div>
-      <div class="page-password scrollable scrollable-y">
+      </div>
+      <div class="page-password">
         <div class="container center-align">
+          <div class="scrollable scrollable-y">
             <div class="auth-image"></div>
             <h4 class="phone">Enter a password</h4>
             <p class="subtitle">Your account is protected with<br>an additional password</p>
@@ -98,8 +105,10 @@
             </div>
           </div>
         </div>
-      <div class="page-signUp scrollable scrollable-y">
+      </div>
+      <div class="page-signUp">
         <div class="container center-align">
+          <div class="scrollable scrollable-y">
             <div class="auth-image avatar-edit">
               <canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
               <span class="tgico tgico-cameraadd"></span>
@@ -121,6 +130,7 @@
         </div>
       </div>
     </div>
+  </div>
   <div class="popup popup-avatar hide" id="popup-avatar" style="display: none;">
     <div class="popup-container z-depth-1">
       <div class="popup-header">

src/pages/pagePassword.ts

@@ -1,16 +1,16 @@
-import pageIm from './pageIm';
 //import CryptoWorker from '../lib/crypto/cryptoworker';
 //import apiManager from '../lib/mtproto/apiManager';
 import { putPreloader } from '../components/misc';
-
+import mediaSizes from '../helpers/mediaSizes';
+import { AccountPassword } from '../layer';
 import LottieLoader, { RLottiePlayer } from '../lib/lottieLoader';
 //import passwordManager from '../lib/mtproto/passwordManager';
 import apiManager from '../lib/mtproto/mtprotoworker';
-import Page from './page';
 import passwordManager from '../lib/mtproto/passwordManager';
 import { cancelEvent } from '../lib/utils';
-import { AccountPassword } from '../layer';
+import Page from './page';
-import mediaSizes from '../helpers/mediaSizes';
+import pageIm from './pageIm';
+
 
 let passwordInput: HTMLInputElement;
 
@@ -82,7 +82,7 @@ let onFirstMount = (): Promise<any> => {
     this.textContent = 'PLEASE WAIT...';
     putPreloader(this);
 
-    passwordManager.check(value, state).then((response: any) => {
+    passwordManager.check(value, state).then((response) => {
       //console.log('passwordManager response:', response);
         
       switch(response._) {

src/scss/partials/pages/_pages.scss

@@ -10,6 +10,7 @@
 
   .subtitle {
     margin: 0;
+
     @include respond-to(handhelds) {
       font-size: 14px;
     }
@@ -25,6 +26,10 @@
     }
   }
 
+  .auth-image, .subtitle, .input-wrapper {
+    flex: 0 0 auto;
+  }
+
   .tabs-container {
     height: 100%;
     width: 100%;
@@ -35,14 +40,6 @@
         flex-direction: row;
       } */
 
-      &:before, &:after {
-        content: " ";
-        flex: 1;
-        min-height: 3rem;
-        /* height: 105px; */
-        width: 100%;
-      }
-
       > div {
         height: 810px;
         padding: 0;
@@ -51,6 +48,19 @@
         flex-direction: column;
       }
     }
+
+    .container > .scrollable {
+      display: flex;
+      flex-direction: column;
+
+      &:before, &:after {
+        content: " ";
+        flex: 1;
+        min-height: 3rem;
+        /* height: 105px; */
+        width: 100%;
+      }
+    }
   }
 
   // @media (max-height: 858px) {
@@ -88,6 +98,12 @@
   }
 }
 
+.page-authCode {
+  .phone-wrapper {
+    flex: 0 0 auto;
+  }
+}
+
 .sign-logo {
   max-width: 100%;
   max-height: 100%;
@@ -114,6 +130,10 @@
       height: 166px;
     }
   }
+
+  h4, .qr-description, .qr {
+    flex: 0 0 auto;
+  }
 }
 
 /* .page-signQR {
@@ -141,7 +161,10 @@
     @include respond-to(handhelds) {
       margin-bottom: 24px;
     }
+  }
 
+  .fullName  {
+    flex: 0 0 auto;
   }
 
   #signUp {

src/scss/partials/pages/_password.scss

@@ -5,6 +5,11 @@
     &[type="password"] {
       font-size: 2.25rem;
       padding-left: 10px;
+
+      html.is-ios & {
+        font-size: .75rem;
+        letter-spacing: .125rem;
+      }
     }
   }