From 07da34480749b30f0ec0dc2435e38c89807aa363 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 1 Apr 2023 09:12:32 -0700
Subject: [PATCH] split-timeline: use top for animations

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
---
 src/components/SplitTimeline.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/SplitTimeline.vue b/src/components/SplitTimeline.vue
index ca72bbc4..0f589506 100644
--- a/src/components/SplitTimeline.vue
+++ b/src/components/SplitTimeline.vue
@@ -268,11 +268,14 @@ export default defineComponent({
     > .timeline {
       height: 50%;
       padding-left: 0;
-      will-change: transform, height;
-      transition: transform 0.2s ease, height 0.2s ease;
       border-top-left-radius: 20px;
       border-top-right-radius: 20px;
 
+      // Note: you can't use transforms to animate the top
+      // because it causes the viewer to be rendered incorrectly
+      will-change: top, height;
+      transition: top 0.2s ease, height 0.2s ease;
+
       > .timeline-header {
         height: 58px;
 
@@ -299,19 +302,18 @@ export default defineComponent({
     }
 
     &.m-zero > .timeline {
-      transform: translateY(calc(200% - 60px)); // show attribution
+      top: calc(100% - 58px); // show attribution
     }
     &.m-zero > .primary {
-      height: calc(100% - 60px); // show full map
+      height: calc(100% - 58px); // show full map
     }
 
     &.m-one > .timeline {
-      transform: translateY(100%); // show half map
+      top: 50%; // show half map
     }
 
     &.m-two > .timeline {
-      will-change: unset; // ensure top-bar is at top
-      transform: none; // show timeline
+      top: 0%;
       height: 100%;
     }
   }