From 3cbcdc69fad7a440ddf457a666143570ae115c2f Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 22 Aug 2021 11:09:08 -0700
Subject: [PATCH] More Safari fixes.

---
 src/frigate-hass-card.scss | 2 ++
 src/frigate-hass-card.ts   | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/frigate-hass-card.scss b/src/frigate-hass-card.scss
index ec7dd2ce..cb4d236d 100644
--- a/src/frigate-hass-card.scss
+++ b/src/frigate-hass-card.scss
@@ -47,6 +47,8 @@ ha-card {
   height: 100%;
   position: relative;
   background-color: var(--secondary-background-color, black);
+
+  transform-style: preserve-3d; /* Safari brings video elements forward without this */
 }
 
 /* Don't drop shadow or have radius for nested cards: webrtc */
diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index 140048e9..9cef9dca 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -651,6 +651,7 @@ export class FrigateCard extends LitElement {
         class="frigate-card-viewer"
         muted
         controls
+        playsinline
         @play=${() => {
           this._clipPlaying = true;
         }}