Update styling for safari

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 📊",

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>

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">