From ae8ac0620c8d62857000fbeebbdd79f253c8726d Mon Sep 17 00:00:00 2001
From: Frankie Fu <ffu@google.com>
Date: Mon, 13 Feb 2017 09:55:07 -0800
Subject: [PATCH] for Chrome < 56 and Chrome iOS, fallback to use fixed size
 instead of "vh"

---
 index.html                       |  4 ++++
 src/news-app.html                | 15 +++++++++++++++
 src/news-article-cover.html      | 16 +++++++++++++++-
 src/news-article.html            |  6 ++++++
 src/news-list-featured-item.html | 14 ++++++++++++++
 5 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index dca9580c..dce57506 100644
--- a/index.html
+++ b/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;
diff --git a/src/news-app.html b/src/news-app.html
index 6cd6df8a..85da1de8 100644
--- a/src/news-app.html
+++ b/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() {
diff --git a/src/news-article-cover.html b/src/news-article-cover.html
index e1b52257..6c1b0634 100644
--- a/src/news-article-cover.html
+++ b/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>
diff --git a/src/news-article.html b/src/news-article.html
index 2ac39fe4..e5f46616 100644
--- a/src/news-article.html
+++ b/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>
 
diff --git a/src/news-list-featured-item.html b/src/news-list-featured-item.html
index f934b2a3..aa94b7ea 100644
--- a/src/news-list-featured-item.html
+++ b/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);
         }