From 0184174a528112082fa93ce64ca53b5f48025a69 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 25 Jun 2022 14:11:40 -0700
Subject: [PATCH] Fix curves borders on Safari

---
 src/scss/card.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/scss/card.scss b/src/scss/card.scss
index 65e2ef78..58f130a1 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -24,6 +24,9 @@ div.main {
   // boundary.
   border-radius: var(--ha-card-border-radius, 4px);
 
+  // Necessary to get Safari to show border-radius correctly.
+  transform: translateZ(0);
+
   // Include the borders in the sizing (to keep the triggered warning pulse
   // visible in fullscreen).
   box-sizing: border-box;
@@ -78,7 +81,6 @@ ha-card {
   position: static;
   color: var(--secondary-text-color, white);
   background-color: var(--secondary-background-color, black);
-  border-radius: var(--ha-card-border-radius, 4px);
 }
 
 frigate-card-live.hidden {