diff --git a/src/popup.vue b/src/popup.vue
index 731adf6d..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>
@@ -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() {
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 {