Fix scrolling on mobile Safari and improve perf

piratepx · Dec 15, 2020 · d7d0bbe · d7d0bbe
1 parent 43ce58a
commit d7d0bbe
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/web/src/components/project/dashboard/ProjectDashboard.vue b/web/src/components/project/dashboard/ProjectDashboard.vue
@@ -16,6 +16,7 @@
       <project-dashboard-header
         :current-project="currentProject"
         :dates="dates"
+        :scroll-id="scrollId"
         :scroll-left="scrollLeft"
         @scroll="$emit('scroll', $event)"
       />
@@ -28,6 +29,7 @@
           :identifier="identifier"
           :max-count="maxCount"
           :records="identifierRecords"
+          :scroll-id="scrollId"
           :scroll-left="scrollLeft"
           @scroll="$emit('scroll', $event)"
         />
@@ -69,6 +71,10 @@ export default {
       type: Map,
       default: null,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,

diff --git a/web/src/components/project/dashboard/ProjectDashboardHeader.vue b/web/src/components/project/dashboard/ProjectDashboardHeader.vue
@@ -1,6 +1,7 @@
 <template>
   <project-dashboard-scrollable
     class="sticky top-0 bg-gray-100 mb-5 border-b border-gray-900 py-3 text-center text-xs"
+    :scroll-id="scrollId"
     :scroll-left="scrollLeft"
     @scroll="$emit('scroll', $event)"
   >
@@ -31,6 +32,10 @@ export default {
       type: Array,
       required: true,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,

diff --git a/web/src/components/project/dashboard/ProjectDashboardRecord.vue b/web/src/components/project/dashboard/ProjectDashboardRecord.vue
@@ -3,6 +3,7 @@
     <h2 class="font-semibold break-words mb-1">{{ identifier }}</h2>
     <project-dashboard-scrollable
       class="pb-3"
+      :scroll-id="scrollId"
       :scroll-left="scrollLeft"
       @scroll="$emit('scroll', $event)"
     >
@@ -48,6 +49,10 @@ export default {
       type: Map,
       required: true,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,

diff --git a/web/src/components/project/dashboard/ProjectDashboardScrollable.vue b/web/src/components/project/dashboard/ProjectDashboardScrollable.vue
@@ -3,7 +3,7 @@
     ref="scrollable"
     class="overflow-x-auto"
     :style="{ direction: 'rtl' }"
-    @scroll="$emit('scroll', $event)"
+    @scroll="scroll"
   >
     <ol class="flex" :style="{ minWidth: '1100px' }">
       <slot />
@@ -12,23 +12,50 @@
 </template>
 
 <script>
+let id = 0
+
 export default {
   props: {
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,
     },
   },
   emits: ['scroll'],
+  data() {
+    return {
+      id: id++,
+    }
+  },
   watch: {
     scrollLeft(value) {
-      this.$refs.scrollable.scrollLeft = value
+      if (this.scrollId !== this.id) {
+        this.$refs.scrollable.scrollLeft = value
+      }
     },
   },
   mounted() {
     this.$nextTick(() => {
       this.$refs.scrollable.scrollLeft = this.scrollLeft
     })
   },
+  methods: {
+    scroll($event) {
+      let scrollLeft = $event.target.scrollLeft
+
+      if (this.scrollLeft === scrollLeft) {
+        return
+      }
+
+      this.$emit('scroll', {
+        scrollId: this.id,
+        scrollLeft,
+      })
+    },
+  },
 }
 </script>
diff --git a/web/src/views/project/ProjectDashboardView.vue b/web/src/views/project/ProjectDashboardView.vue
@@ -4,9 +4,10 @@
     :dates="dates"
     :max-count="maxCount"
     :records="recordsGroupedAndSorted"
+    :scroll-id="scrollId"
     :scroll-left="scrollLeft"
     :status="status"
-    @scroll="scrollLeft = $event.target.scrollLeft"
+    @scroll="scroll"
   />
 </template>
 
@@ -21,6 +22,7 @@ export default {
   },
   data() {
     return {
+      scrollId: null,
       scrollLeft: 0,
     }
   },
@@ -47,6 +49,10 @@ export default {
   },
   methods: {
     ...mapActions('counts', ['fetch']),
+    scroll({ scrollId, scrollLeft }) {
+      this.scrollId = scrollId
+      this.scrollLeft = scrollLeft
+    },
   },
   pageTitle() {
     return this.currentProject.name