Bug Fix: Drag performance.

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
  */

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
  */
@@ -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.esm.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.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.0.1
+ * Version  : 3.0.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -2079,6 +2079,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var Move = Components2.Move,
         Scroll = Components2.Scroll,
         Controller = Components2.Controller;
+    var ruleBy = Components2.Style.ruleBy;
     var track = Components2.Elements.track;
     var _Components2$Directio2 = Components2.Direction,
         resolve = _Components2$Directio2.resolve,
@@ -2130,10 +2131,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             bind(target, POINTER_UP_EVENTS, onPointerUp);
             Move.cancel();
             Scroll.cancel();
+            ruleBy(track, "will-change", "transform");
             save(e);
-          }
-
-          if (e.cancelable) {
+          } else {
             prevent(e, true);
           }
         }
@@ -2176,6 +2176,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function onPointerUp(e) {
       unbind(target, POINTER_MOVE_EVENTS + " " + POINTER_UP_EVENTS);
+      ruleBy(track, "will-change", "");
 
       if (lastEvent) {
         if (isDragging || e.cancelable && isSliderDirection()) {

dist/types/components/Drag/Drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA8T9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA+T9F"}

package.json

@@ -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",

src/js/components/Drag/Drag.ts

@@ -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() ) ) {