From 2d5eb43bbd4e26191ada7a97884128876bc9af66 Mon Sep 17 00:00:00 2001
From: Niklas Keller <me@kelunik.com>
Date: Tue, 16 Feb 2021 22:06:21 +0100
Subject: [PATCH 1/2] fix: passive scroll handler to avoid scroll blocking

---
 src/popup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup.vue b/src/popup.vue
index 731adf6d..1ea35182 100644
--- a/src/popup.vue
+++ b/src/popup.vue
@@ -61,7 +61,7 @@ export default {
     const relativeElement = this.$parent.$el;
     this._displayPopup = rafThrottle(() => this.displayPopup());
     this._scrollParent = getScrollParent(relativeElement) || window;
-    this._scrollParent.addEventListener('scroll', this._displayPopup);
+    this._scrollParent.addEventListener('scroll', this._displayPopup, { passive: true });
     window.addEventListener('resize', this._displayPopup);
   },
   beforeDestroy() {

From 90ae53b6501ed6d5b93321a0afea87c8488c4c24 Mon Sep 17 00:00:00 2001
From: Niklas Keller <me@kelunik.com>
Date: Tue, 16 Feb 2021 22:38:52 +0100
Subject: [PATCH 2/2] refactor: use transform and composition hints

This improves performance in modern browsers, as can be observed by opening the Chrome developer tools, hitting Ctrl + Shift + P, typing 'Show rendering', and selecting 'Frame Rendering Stats' and 'Scrolling performance issues'.
---
 src/popup.vue            | 2 +-
 src/style/index.scss     | 3 +++
 src/style/scrollbar.scss | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/popup.vue b/src/popup.vue
index 1ea35182..6eccbeb8 100644
--- a/src/popup.vue
+++ b/src/popup.vue
@@ -3,7 +3,7 @@
     <div
       v-if="visible"
       :class="`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`"
-      :style="{ top, left, position: 'absolute' }"
+      :style="{ transform: 'translate(' + left + ',' + top + ')' }"
     >
       <slot></slot>
     </div>
diff --git a/src/style/index.scss b/src/style/index.scss
index 83f0449e..ff0a4cce 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -106,6 +106,9 @@
   margin-bottom: 1px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   z-index: $popup-z-index;
+  will-change: transform;
+  left: 0;
+  top: 0;
 }
 
 .#{$namespace}-datepicker-sidebar {
diff --git a/src/style/scrollbar.scss b/src/style/scrollbar.scss
index 101aeeb5..96dbce15 100644
--- a/src/style/scrollbar.scss
+++ b/src/style/scrollbar.scss
@@ -13,6 +13,8 @@
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  /* force own composition layer, see https://stackoverflow.com/a/41026886/2373138 */
+  will-change: transform;
 }
 
 .#{$namespace}-scrollbar-track {