From e1edfae929ca2a6e14bc5fd4a9a79c85f72620ca Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 17 Jan 2023 19:29:46 +0200
Subject: [PATCH] Fix Safari bug when lazy loading images

Without it in e.g. team pages there is weird borders
before the image loads around the pfp's.
---
 app/styles/common.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/styles/common.css b/app/styles/common.css
index dbdb20e20..5b45c6888 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -684,6 +684,13 @@ dialog::backdrop {
   background-color: var(--bg-lightest);
 }
 
+/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
+@media not all and (min-resolution: 0.001dpcm) {
+  img[loading="lazy"] {
+    clip-path: inset(0.5px);
+  }
+}
+
 .alert > svg {
   height: 1.75rem;
   fill: var(--theme-info);