Bug Fix: Drag performance.

Author: NaotoshiFujita

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.1
+ * Version  : 3.0.2
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1726,6 +1726,7 @@ const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
   const { Move, Scroll, Controller } = Components2;
+  const { ruleBy } = Components2.Style;
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
@@ -1765,9 +1766,9 @@ function Drag(Splide2, Components2, options) {
           bind(target, POINTER_UP_EVENTS, onPointerUp);
           Move.cancel();
           Scroll.cancel();
+          ruleBy(track, "will-change", "transform");
           save(e);
-        }
-        if (e.cancelable) {
+        } else {
           prevent(e, true);
         }
       }
@@ -1802,6 +1803,7 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerUp(e) {
     unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
+    ruleBy(track, "will-change", "");
     if (lastEvent) {
       if (isDragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.1
+ * Version  : 3.0.2
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1722,6 +1722,7 @@ const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
   const { Move, Scroll, Controller } = Components2;
+  const { ruleBy } = Components2.Style;
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
@@ -1761,9 +1762,9 @@ function Drag(Splide2, Components2, options) {
           bind(target, POINTER_UP_EVENTS, onPointerUp);
           Move.cancel();
           Scroll.cancel();
+          ruleBy(track, "will-change", "transform");
           save(e);
-        }
-        if (e.cancelable) {
+        } else {
           prevent(e, true);
         }
       }
@@ -1798,6 +1799,7 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerUp(e) {
     unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
+    ruleBy(track, "will-change", "");
     if (lastEvent) {
       if (isDragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

dist/js/splide.js

@@ -30,6 +30,7 @@ export interface DragComponent extends BaseComponent {
 export function Drag( Splide: Splide, Components: Components, options: Options ): DragComponent {
   const { on, emit, bind, unbind } = EventInterface( Splide );
   const { Move, Scroll, Controller } = Components;
+  const { ruleBy } = Components.Style;
   const { track } = Components.Elements;
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
@@ -132,10 +133,9 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
           bind( target, POINTER_UP_EVENTS, onPointerUp );
           Move.cancel();
           Scroll.cancel();
+          ruleBy( track, 'will-change', 'transform' );
           save( e );
-        }
-
-        if ( e.cancelable ) {
+        } else {
           prevent( e, true );
         }
       }
@@ -190,6 +190,7 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   function onPointerUp( e: TouchEvent | MouseEvent ): void {
     unbind( target, `${ POINTER_MOVE_EVENTS } ${ POINTER_UP_EVENTS }` );
+    ruleBy( track, 'will-change', '' );
 
     if ( lastEvent ) {
       if ( isDragging || ( e.cancelable && isSliderDirection() ) ) {