From f2a1e0179405c92e01cdacc0292b33ffffb43352 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sun, 2 Feb 2020 14:38:17 +0100
Subject: [PATCH] fix: table row background image bug on Edge/Safari on live
 game tab

---
 .../src/components/Summoner/Live/LiveTeam.vue | 35 +++++++++++++++----
 client/src/views/SummonerLive.vue             |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index d682aa6..585d3b0 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -19,12 +19,8 @@
         <tr
           v-for="(player, index) in team"
           :key="player.summonerId"
-          :style="{
-            backgroundImage:
-              `linear-gradient(90deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 40%, rgba(42, 67, 101, 1) 100%),
-                  url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${player.championId}/${player.championId}000.jpg')`
-          }"
-          class="bg-cover bg-center"
+          :style="getCSSVars(player.championId)"
+          class="relative live-team-row"
         >
           <td class="py-1 pl-2 rounded-l-lg">
             <div class="flex items-center">
@@ -138,7 +134,7 @@
         </tr>
       </tbody>
       <tbody v-else>
-        <tr v-for="index in 5" :key="index" class="bg-blu">
+        <tr v-for="index in 5" :key="index">
           <td colspan="4" class="bg-blue-760 rounded-lg">
             <content-loader
               :height="54"
@@ -216,6 +212,12 @@ export default {
 
       return this.ally ? 'border-teal-400' : 'border-red-400'
     },
+    getCSSVars(championId) {
+      return {
+        '--bg-img': `linear-gradient(90deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 40%, rgba(42, 67, 101, 1) 100%),
+            url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${championId}/${championId}000.jpg')`,
+      }
+    },
     getSummonerLink,
   }
 }
@@ -232,4 +234,23 @@ export default {
 .w-bans {
   width: 5rem;
 }
+
+.live-team-row td {
+  position: relative;
+  z-index: 20;
+}
+
+.live-team-row td:first-child:before {
+  content: "";
+  position: absolute;
+  z-index: -10;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1160px;
+  background-image: var(--bg-img);
+  background-position: center;
+  background-size: cover;
+  border-radius: 0.5rem;
+}
 </style>
diff --git a/client/src/views/SummonerLive.vue b/client/src/views/SummonerLive.vue
index bc1b05e..b5ee20e 100644
--- a/client/src/views/SummonerLive.vue
+++ b/client/src/views/SummonerLive.vue
@@ -1,7 +1,7 @@
 <template>
   <div key="live-game">
     <div v-if="playing || summonerLoading">
-      <div v-if="liveLoaded" class="flex items-center justify-end text-blue-200 text-base">
+      <div v-if="liveLoaded" class="-mt-4 flex items-center justify-end text-blue-200 text-base">
         <div>{{ gamemode.type }} {{ gamemode.name }}</div>
         <div class="mx-2">-</div>
         <div>{{ displayStartTime }}</div>