From a8a15635861ebb6ebc7ac06d56bec7779847323a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 16 Sep 2020 17:20:49 +0200
Subject: [PATCH] Fix safari not rendering history graph (#7025)

---
 src/components/state-history-chart-line.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/state-history-chart-line.js b/src/components/state-history-chart-line.js
index 1b627e4206..ba71b0358c 100644
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -62,12 +62,22 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
     this.drawChart();
   }
 
+  ready() {
+    super.ready();
+    // safari doesn't always render the canvas when we animate it, so we remove overflow hidden when the animation is complete
+    this.addEventListener("transitionend", () => {
+      this.style.overflow = "auto";
+    });
+  }
+
   dataChanged() {
     this.drawChart();
   }
 
   _onRenderedChanged(rendered) {
-    if (rendered) this.animateHeight();
+    if (rendered) {
+      this.animateHeight();
+    }
   }
 
   animateHeight() {
@@ -79,15 +89,15 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
   }
 
   drawChart() {
+    if (!this._isAttached) {
+      return;
+    }
+
     const unit = this.unit;
     const deviceStates = this.data;
     const datasets = [];
     let endTime;
 
-    if (!this._isAttached) {
-      return;
-    }
-
     if (deviceStates.length === 0) {
       return;
     }