fuck safari

Author: brc-dd

lib/components/SChartBar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import * as d3 from 'd3'
-import { ref, watch } from 'vue'
-import { type ChartColor, type KV, c, scheme } from '../support/Chart'
+import { useTemplateRef, watch } from 'vue'
+import { type ChartColor, type KV, c, scheme, shouldDisableTransitions } from '../support/Chart'
 
 export type { ChartColor, KV }
 
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
   tooltipFormat: (d: KV) => `${d.key} – ${d.value}`
 })
 
-const chartRef = ref<HTMLElement>()
+const chartRef = useTemplateRef('chart')
 const { width, height } = useElementSize(chartRef)
 
 // Function to render the chart
@@ -218,12 +218,17 @@ function renderChart({
   }
 
   if (props.tooltip) {
-  // Create a tooltip
+    // Create a tooltip
     const Tooltip = d3
       .select(chartRef.value)
       .append('div')
       .attr('class', 'tooltip')
 
+    if (shouldDisableTransitions()) {
+      Tooltip
+        .style('transition', 'none')
+    }
+
     // Add interactivity
     bars
       .on('mouseover', (_, d) => {
@@ -275,7 +280,7 @@ watch(
 </script>
 
 <template>
-  <div ref="chartRef" class="SChartBar" :class="mode" />
+  <div ref="chart" class="SChartBar" />
 </template>
 
 <style scoped lang="postcss">

lib/components/SChartPie.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import * as d3 from 'd3'
-import { ref, watch } from 'vue'
-import { type ChartColor, type KV, c, scheme } from '../support/Chart'
+import { useTemplateRef, watch } from 'vue'
+import { type ChartColor, type KV, c, scheme, shouldDisableTransitions } from '../support/Chart'
 
 export type { ChartColor, KV }
 
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<{
   labelFormat: (d: KV) => `${d.key} – ${d.value}`
 })
 
-const chartRef = ref<HTMLElement>()
+const chartRef = useTemplateRef('chart')
 const { width, height } = useElementSize(chartRef)
 
 // Function to render the chart
@@ -271,12 +271,17 @@ function renderChart({
   }
 
   if (props.tooltip) {
-  // Create a tooltip
+    // Create a tooltip
     const Tooltip = d3
       .select(chartRef.value)
       .append('div')
       .attr('class', 'tooltip')
 
+    if (shouldDisableTransitions()) {
+      Tooltip
+        .style('transition', 'none')
+    }
+
     // Add interactivity
     arcs
       .on('mouseover', (_, d) => {
@@ -328,7 +333,7 @@ watch(
 </script>
 
 <template>
-  <div ref="chartRef" class="SChartPie" />
+  <div ref="chart" class="SChartPie" />
 </template>
 
 <style scoped lang="postcss">

lib/support/Chart.ts

@@ -9,6 +9,10 @@
 import FileSaver from 'file-saver'
 import html2canvas from 'html2canvas'
 
+export function shouldDisableTransitions(): boolean {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+}
+
 export const c = {
   text1: 'light-dark(#1c2024, #edeef0)',
   text2: 'light-dark(#5d616b, #abafb7)',