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

@@ -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",

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);

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>