diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index e7e4384936..1d177e60b7 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -98,12 +98,12 @@ export default new Polymer({
     this.context = this.canvas.getContext('2d');
 
     this.debounce('drawGradient', () => {
-      const style = getComputedStyle(this);
-      const width = parseInt(style.width, 10);
-      const height = parseInt(style.height, 10);
-
-      this.width = width;
-      this.height = height;
+      let style;
+      if (!this.width || !this.height) {
+        style = getComputedStyle(this);
+      }
+      const width = this.width || parseInt(style.width, 10);
+      const height = this.height || parseInt(style.height, 10);
 
       const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
       colorGradient.addColorStop(0, 'rgb(255,0,0)');
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 2afbd888e0..5bcefba82a 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -21,7 +21,7 @@
 
       max-height: 0px;
       overflow: hidden;
-      transition: max-height .5s ease-in;
+      transition: max-height .2s ease-in;
     }
 
     .has-brightness .brightness {
@@ -33,7 +33,7 @@
     }
 
     .has-rgb_color ha-color-picker {
-      max-height: 500px;
+      max-height: 200px;
     }
   </style>
   <template>
@@ -53,7 +53,7 @@
         </paper-slider>
       </div>
 
-      <ha-color-picker on-colorselected='colorPicked'>
+      <ha-color-picker on-colorselected='colorPicked' height='200'>
       </ha-color-picker>
     </div>
   </template>