Check the dimension of the root element before resizing the slider.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1001,9 +1001,10 @@ function Layout(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
   const { Slides } = Components2;
   const { resolve } = Components2.Direction;
-  const { track, list } = Components2.Elements;
+  const { root, track, list } = Components2.Elements;
   const { getAt } = Slides;
   let vertical;
+  let rootRect;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
@@ -1011,18 +1012,23 @@ function Layout(Splide2, Components2, options) {
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    rootRect = null;
     vertical = options.direction === TTB;
-    style(Splide2.root, "maxWidth", unit(options.width));
+    style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
     resize();
   }
   function resize() {
-    style(track, "height", cssTrackHeight());
-    Slides.style(resolve("marginRight"), unit(options.gap));
-    Slides.style("width", cssSlideWidth() || null);
-    setSlidesHeight();
-    emit(EVENT_RESIZED);
+    const newRect = rect(root);
+    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, "height", cssTrackHeight());
+      Slides.style(resolve("marginRight"), unit(options.gap));
+      Slides.style("width", cssSlideWidth() || null);
+      setSlidesHeight();
+      rootRect = newRect;
+      emit(EVENT_RESIZED);
+    }
   }
   function setSlidesHeight() {
     Slides.style("height", cssSlideHeight() || null, true);
@@ -1173,7 +1179,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!isBusy() && !Components2.Drag.isDragging()) {
+    if (!isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -997,9 +997,10 @@ function Layout(Splide2, Components2, options) {
   const { on, bind, emit } = EventInterface(Splide2);
   const { Slides } = Components2;
   const { resolve } = Components2.Direction;
-  const { track, list } = Components2.Elements;
+  const { root, track, list } = Components2.Elements;
   const { getAt } = Slides;
   let vertical;
+  let rootRect;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
@@ -1007,18 +1008,23 @@ function Layout(Splide2, Components2, options) {
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    rootRect = null;
     vertical = options.direction === TTB;
-    style(Splide2.root, "maxWidth", unit(options.width));
+    style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
     resize();
   }
   function resize() {
-    style(track, "height", cssTrackHeight());
-    Slides.style(resolve("marginRight"), unit(options.gap));
-    Slides.style("width", cssSlideWidth() || null);
-    setSlidesHeight();
-    emit(EVENT_RESIZED);
+    const newRect = rect(root);
+    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      style(track, "height", cssTrackHeight());
+      Slides.style(resolve("marginRight"), unit(options.gap));
+      Slides.style("width", cssSlideWidth() || null);
+      setSlidesHeight();
+      rootRect = newRect;
+      emit(EVENT_RESIZED);
+    }
   }
   function setSlidesHeight() {
     Slides.style("height", cssSlideHeight() || null, true);
@@ -1169,7 +1175,7 @@ function Move(Splide2, Components2, options) {
     removeAttribute(list, "style");
   }
   function reposition() {
-    if (!isBusy() && !Components2.Drag.isDragging()) {
+    if (!isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
       emit(EVENT_REPOSITIONED);

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.2.3
+ * Version  : 3.2.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1164,10 +1164,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var Slides = Components2.Slides;
     var resolve = Components2.Direction.resolve;
     var _Components2$Elements2 = Components2.Elements,
+        root = _Components2$Elements2.root,
         track = _Components2$Elements2.track,
         list = _Components2$Elements2.list;
     var getAt = Slides.getAt;
     var vertical;
+    var rootRect;
 
     function mount() {
       init();
@@ -1177,19 +1179,25 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function init() {
+      rootRect = null;
       vertical = options.direction === TTB;
-      style(Splide2.root, "maxWidth", unit(options.width));
+      style(root, "maxWidth", unit(options.width));
       style(track, resolve("paddingLeft"), cssPadding(false));
       style(track, resolve("paddingRight"), cssPadding(true));
       resize();
     }
 
     function resize() {
-      style(track, "height", cssTrackHeight());
-      Slides.style(resolve("marginRight"), unit(options.gap));
-      Slides.style("width", cssSlideWidth() || null);
-      setSlidesHeight();
-      emit(EVENT_RESIZED);
+      var newRect = rect(root);
+
+      if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+        style(track, "height", cssTrackHeight());
+        Slides.style(resolve("marginRight"), unit(options.gap));
+        Slides.style("width", cssSlideWidth() || null);
+        setSlidesHeight();
+        rootRect = newRect;
+        emit(EVENT_RESIZED);
+      }
     }
 
     function setSlidesHeight() {
@@ -1390,7 +1398,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function reposition() {
-      if (!isBusy() && !Components2.Drag.isDragging()) {
+      if (!isBusy()) {
         Components2.Scroll.cancel();
         jump(Splide2.index);
         emit(EVENT_REPOSITIONED);

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAiNlG"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CA4NlG"}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

src/js/components/Layout/Layout.ts

@@ -34,7 +34,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options
   const { on, bind, emit } = EventInterface( Splide );
   const { Slides } = Components;
   const { resolve } = Components.Direction;
-  const { track, list } = Components.Elements;
+  const { root, track, list } = Components.Elements;
   const { getAt } = Slides;
 
   /**
@@ -42,6 +42,11 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    */
   let vertical: boolean;
 
+  /**
+   * Keeps the DOMRect object of the root element.
+   */
+  let rootRect: DOMRect;
+
   /**
    * Called when the component is mounted.
    */
@@ -57,9 +62,10 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    * Uses `max-width` for the root to prevent the slider from exceeding the parent element.
    */
   function init(): void {
+    rootRect = null;
     vertical = options.direction === TTB;
 
-    style( Splide.root, 'maxWidth', unit( options.width ) );
+    style( root, 'maxWidth', unit( options.width ) );
     style( track, resolve( 'paddingLeft' ), cssPadding( false ) );
     style( track, resolve( 'paddingRight' ), cssPadding( true ) );
 
@@ -70,13 +76,18 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    * Updates dimensions of some elements when the slider is resized.
    */
   function resize(): void {
-    style( track, 'height', cssTrackHeight() );
+    const newRect = rect( root );
 
-    Slides.style( resolve( 'marginRight' ), unit( options.gap ) );
-    Slides.style( 'width', cssSlideWidth() || null );
-    setSlidesHeight();
+    if ( ! rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
+      style( track, 'height', cssTrackHeight() );
 
-    emit( EVENT_RESIZED );
+      Slides.style( resolve( 'marginRight' ), unit( options.gap ) );
+      Slides.style( 'width', cssSlideWidth() || null );
+      setSlidesHeight();
+
+      rootRect = newRect;
+      emit( EVENT_RESIZED );
+    }
   }
 
   /**

src/js/components/Layout/test/general.test.ts

@@ -29,7 +29,7 @@ describe( 'Layout', () => {
 
     expect( style.maxWidth ).toBe( '100px' );
 
-    splide.options.width = 200;
+    splide.options = { width: 200 };
     splide.refresh();
 
     expect( style.maxWidth ).toBe( '200px' );
@@ -43,7 +43,7 @@ describe( 'Layout', () => {
 
     expect( style.height ).toBe( '500px' );
 
-    splide.options.heightRatio = 0.2;
+    splide.options = { heightRatio: 0.2 };
     splide.emit( EVENT_RESIZE );
 
     expect( style.height ).toBe( '200px' );

src/js/components/Move/Move.ts

@@ -77,7 +77,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * - iOS Safari emits window resize event while the user swipes the slider because of the bottom bar.
    */
   function reposition(): void {
-    if ( ! isBusy() && ! Components.Drag.isDragging() ) {
+    if ( ! isBusy() ) {
       Components.Scroll.cancel();
       jump( Splide.index );
       emit( EVENT_REPOSITIONED );

src/js/test/php/examples/default.php

@@ -28,11 +28,6 @@ $settings = get_settings();
           left: 40,
         },
         noDrag: 'button',
-        breakpoints: {
-          1000: {
-            destroy: true,
-          },
-        },
       } );
 
       splide.on( 'moved', () => {

src/js/test/php/examples/drag-free.php

@@ -19,7 +19,7 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        perPage: 3,
+        perPage: 2,
         gap    : '1.5rem',
         drag   : 'free',
         height : 200,
@@ -30,6 +30,12 @@ $settings = get_settings();
       splide.mount();
     } );
   </script>
+
+  <style>
+    body {
+      margin: 50em 0;
+    }
+  </style>
 </head>
 <body>