From cdb9384bf599a417e93d03946b644b5a34d33f14 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Sat, 24 Apr 2021 13:15:56 +0800
Subject: [PATCH] Update styling for safari

---
 src/locales/en.json          |  2 +-
 src/routes/wish/[id].svelte  | 25 ++++++++++++++++++++++---
 src/routes/wish/index.svelte |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 248c3c58..2a1b709e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -25,7 +25,7 @@
       "percentage": "from all",
       "avg": "Pity average",
       "subtitle": "Calculated from data submitted by {user} paimon.moe users",
-      "detail": "Global With Tally"
+      "detail": "Global Wish Tally"
     },
     "wish": {
       "message": "Import your wish history to keep it more than 6 months! Also automatically count your pity and statistic about your wishes with fancy charts 📊",
diff --git a/src/routes/wish/[id].svelte b/src/routes/wish/[id].svelte
index d77c9e26..036bb2fe 100644
--- a/src/routes/wish/[id].svelte
+++ b/src/routes/wish/[id].svelte
@@ -65,6 +65,8 @@
   let currentBannerIndex = -1;
   let selectedBanners;
 
+  let isSafari = false;
+
   selectedBanners = banners[bannerType].map((e) => {
     // banner data based on Asia time
     const diff = e.timezoneDependent === true ? 8 - getTimeOffset() : 0;
@@ -370,6 +372,13 @@
 
   onMount(() => {
     readLocalData();
+
+    isSafari =
+      navigator.vendor &&
+      navigator.vendor.indexOf('Apple') > -1 &&
+      navigator.userAgent &&
+      navigator.userAgent.indexOf('CriOS') == -1 &&
+      navigator.userAgent.indexOf('FxiOS') == -1;
   });
 
   function sort(by) {
@@ -503,7 +512,11 @@
               </TableHeader>
             </tr>
             {#each sorted as pull}
-              <tr class="rarity-{pull.rarity}{pull.striped && sortBy === 'time' ? ' striped' : ''}">
+              <tr
+                class="{isSafari ? 'safari-only' : ''} rarity-{pull.rarity}{pull.striped && sortBy === 'time'
+                  ? ' striped'
+                  : ''}"
+              >
                 <td
                   class="border-t border-gray-700 px-4 text-gray-200 whitespace-no-wrap relative"
                   style="font-family: monospace;"
@@ -541,7 +554,7 @@
                 <td class="border-t border-gray-700 px-2 text-gray-200 text-center">
                   {pull.at}
                 </td>
-                {#if sortBy === 'time' && ((pull.end && !sortOrder) || (pull.start && sortOrder))}
+                {#if sortBy === 'time' && !isSafari && ((pull.end && !sortOrder) || (pull.start && sortOrder))}
                   <td class="relative hidden xl:table-cell">
                     <div
                       class="border-t border-gray-700 absolute left-0 top-0 z-10 border-start"
@@ -563,7 +576,7 @@
                   </td>
                 {/if}
                 <td
-                  class="border-t border-gray-700 px-4 text-gray-200 top-0 text-center {sortBy === 'time'
+                  class="border-t border-gray-700 px-4 text-gray-200 top-0 text-center {sortBy === 'time' && !isSafari
                     ? 'xl:hidden'
                     : ''}"
                 >
@@ -734,4 +747,10 @@
       top: -1px;
     }
   }
+
+  /* safari row background */
+  .safari-only {
+    background-attachment: fixed !important;
+    background-position-x: 300px !important;
+  }
 </style>
diff --git a/src/routes/wish/index.svelte b/src/routes/wish/index.svelte
index 64fc6f5d..52e31cae 100644
--- a/src/routes/wish/index.svelte
+++ b/src/routes/wish/index.svelte
@@ -116,11 +116,11 @@
   <title>Wish Counter - Paimon.moe</title>
   <meta
     name="description"
-    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC or Android."
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also automatically import the logs and backup it from PC, Android, iOS, PlayStation then save it more than 6 months."
   />
   <meta
     property="og:description"
-    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also auto import the logs from your PC or Android."
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon. You can also automatically import the logs and backup it from PC, Android, iOS, PlayStation then save it more than 6 months."
   />
 </svelte:head>
 <div class="pt-20 lg:ml-64 lg:pt-8 px-4 md:px-8">