for Chrome < 56 and Chrome iOS, fallback to use fixed size instead of "vh"

Author: frankiefu

index.html

@@ -53,6 +53,10 @@
         background-size: 100% 100vh;
       }
 
+      body.fixed-viewport-height {
+        background-size: 100% 600px;
+      }
+
       news-app[unresolved] {
         height: 22px;
         padding-top: 21px;

src/news-app.html

@@ -45,6 +45,9 @@
           padding: 8px;
           text-align: center;
         };
+
+        /* use this value for the viewport height instead of "vh" unit */
+        --viewport-height: 600px;
       }
 
       iron-pages {
@@ -206,6 +209,18 @@
       created: function() {
         // Custom elements polyfill safe way to indicate an element has been upgraded.
         this.removeAttribute('unresolved');
+
+        // Chrome on iOS recomputes "vh" unit when URL bar goes off screen. Since we use "vh" unit
+        // to size the cover image and the title, those items will resize in response to the URL
+        // bar being shown or hidden. FWIW, this is not an issue in Chrome 56 on Android or iOS
+        // Safari. To workaround this on Chrome on iOS, we will use a
+        // fixed viewport height in places where normally relying on "vh" unit and replace them with
+        // custom property "--viewport-height".
+        var ua = navigator.userAgent;
+        var cMatch = navigator.userAgent.match(/Android.*Chrome[\/\s](\d+\.\d+)/);
+        if (ua.match('CriOS') || (cMatch && cMatch[0] && cMatch[1] < 56)) {
+          document.body.classList.add('fixed-viewport-height');
+        }
       },
 
       attached: function() {

src/news-article-cover.html

@@ -65,6 +65,10 @@
         object-fit: cover;
       }
 
+      :host-context(.fixed-viewport-height) .cover-img-container > news-img {
+        min-height: calc(var(--viewport-height) * 0.6);
+      }
+
       .timer-icon {
         margin-left: 30px;
       }
@@ -86,6 +90,10 @@
           z-index: 1;
         }
 
+        :host-context(.fixed-viewport-height) .cover-text {
+          height: var(--viewport-height);
+        }
+
         .cover-text .category {
           border: var(--app-transparent-border-style);
         }
@@ -122,6 +130,12 @@
           -webkit-line-clamp: 7;
           -webkit-box-orient: vertical;
         }
+
+        :host-context(.fixed-viewport-height) h1 {
+          font-size: calc(var(--viewport-height) * 0.06);
+          line-height: calc(var(--viewport-height) * 0.07);
+          max-height: calc(var(--viewport-height) * 0.49);
+        }
       }
     </style>
 
@@ -142,7 +156,7 @@ <h1>[[article.headline]]</h1>
       <news-img src="[[article.imageUrl]]" hidden$="[[!article.imageUrl]]"></news-img>
       <div class="scrim"></div>
     </div>
-   
+
   </template>
 
   <script>

src/news-article.html

@@ -149,6 +149,12 @@
           -webkit-line-clamp: 7;
           -webkit-box-orient: vertical;
         }
+
+        :host-context(.fixed-viewport-height) h1 {
+          font-size: calc(var(--viewport-height) * 0.06);
+          line-height: calc(var(--viewport-height) * 0.07);
+          max-height: calc(var(--viewport-height) * 0.49);
+        }
       }
     </style>
 

src/news-list-featured-item.html

@@ -85,10 +85,18 @@
           color: var(--app-cover-text-color);
         }
 
+        :host-context(.fixed-viewport-height) a {
+          height: var(--viewport-height);
+        }
+
         news-img {
           min-height: 60vh;
         }
 
+        :host-context(.fixed-viewport-height) news-img {
+          min-height: calc(var(--viewport-height) * 0.6);
+        }
+
         .scrim {
           @apply(--layout-fit);
           background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.7) 80%, rgba(0,0,0,1) 100%);
@@ -113,6 +121,12 @@
           -webkit-box-orient: vertical;
         }
 
+        :host-context(.fixed-viewport-height) h2 {
+          font-size: calc(var(--viewport-height) * 0.06);
+          line-height: calc(var(--viewport-height) * 0.07);
+          max-height: calc(var(--viewport-height) * 0.49);
+        }
+
         .category {
           border: var(--app-transparent-border-style);
         }