From 51f4028343656848b94f780deda1a10539d48928 Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@maartenenliesbeth.nl>
Date: Wed, 4 Apr 2018 01:47:26 +0200
Subject: [PATCH] Fix scrollable clipping controls because of
 webkit-overflow-scrolling: touch; (#1065)

* change labeled slider

* fix `-webkit-overflow-scrolling: touch` clipping positioned elements

* Revert "change labeled slider"

This reverts commit fc34cb712b24223b9983f8c1ef1b498be86515c0.
---
 bower.json                                    |  1 +
 src/dialogs/more-info/more-info-controls.html |  2 +-
 src/resources/ha-style.html                   | 32 +++++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/bower.json b/bower.json
index 64f162391f..f002ea3733 100644
--- a/bower.json
+++ b/bower.json
@@ -52,6 +52,7 @@
     "paper-toast": "PolymerElements/paper-toast#^2.0.0",
     "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
     "polymer": "^2.1.1",
+    "shadycss": "^1.1.0",
     "vaadin-combo-box": "vaadin/vaadin-combo-box#^3.0.2",
     "vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.0",
     "web-animations-js": "^2.2.5",
diff --git a/src/dialogs/more-info/more-info-controls.html b/src/dialogs/more-info/more-info-controls.html
index 0d6c9243d6..44709c3cb0 100644
--- a/src/dialogs/more-info/more-info-controls.html
+++ b/src/dialogs/more-info/more-info-controls.html
@@ -11,7 +11,7 @@
 
 <dom-module id="more-info-controls">
   <template>
-    <style>
+    <style include='ha-style-dialog'>
       app-toolbar {
         color: var(--more-info-header-color);
         background-color: var(--more-info-header-background);
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index feb05e7c9f..d617d84250 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -84,6 +84,22 @@
     --light-primary-opacity: 1.0;
   }
 </style>
+
+  <style shady-unscoped>
+    /*
+      prevent clipping of positioned elements in a small scrollable
+      force smooth scrolling if can scroll
+      use non-shady selectors so this only targets iOS 9
+      conditional mixin set in ha-style-dialog does not work with shadyCSS
+    */
+    paper-dialog-scrollable:not(.can-scroll) > .scrollable {
+      -webkit-overflow-scrolling: auto !important;
+    }
+    paper-dialog-scrollable.can-scroll > .scrollable {
+      -webkit-overflow-scrolling: touch !important;
+    }
+  </style>
+
 </custom-style>
 
 <dom-module id='ha-style'>
@@ -169,10 +185,18 @@
           position: fixed !important;
           margin: 0;
         }
+      }
 
+      /* prevent clipping of positioned elements */
+      paper-dialog-scrollable {
+        --paper-dialog-scrollable: {
+          -webkit-overflow-scrolling: auto;
+        }
+      }
+      /* force smooth scrolling for iOS 10 */
+      paper-dialog-scrollable.can-scroll {
         --paper-dialog-scrollable: {
           -webkit-overflow-scrolling: touch;
-          margin-bottom: 16px;
         }
       }
 
@@ -180,12 +204,6 @@
         paper-dialog {
           @apply(--ha-dialog-narrow);
         }
-        :host {
-          --paper-dialog-scrollable: {
-            -webkit-overflow-scrolling: touch;
-            margin-bottom: 0px;
-          }
-        }
       }
     </style>
   </template>