Use the tallest height in the fade type for consistency. Optimize transition components.

dist/css/splide-core.min.css

@@ -1 +1 @@
-@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
+@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}

dist/js/splide.cjs.js

@@ -2915,24 +2915,21 @@ var DEFAULTS = {
 };
 
 function Fade(Splide2, Components2, options) {
-  var _EventInterface15 = EventInterface(Splide2),
-      on = _EventInterface15.on;
+  var Slides = Components2.Slides;
 
   function mount() {
-    on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-      nextTick(function () {
-        Components2.Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
-      });
+    EventInterface(Splide2).on([EVENT_MOUNTED, EVENT_REFRESH], init);
+  }
+
+  function init() {
+    Slides.forEach(function (Slide) {
+      Slide.style("transform", "translateX(-" + 100 * Slide.index + "%)");
     });
   }
 
   function start(index, done) {
-    var track = Components2.Elements.track;
-    style(track, "height", unit(rect(track).height));
-    nextTick(function () {
-      done();
-      style(track, "height", "");
-    });
+    Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
+    nextTick(done);
   }
 
   return {
@@ -2943,9 +2940,6 @@ function Fade(Splide2, Components2, options) {
 }
 
 function Slide(Splide2, Components2, options) {
-  var _EventInterface16 = EventInterface(Splide2),
-      bind = _EventInterface16.bind;
-
   var Move = Components2.Move,
       Controller = Components2.Controller,
       Scroll = Components2.Scroll;
@@ -2954,7 +2948,7 @@ function Slide(Splide2, Components2, options) {
   var endCallback;
 
   function mount() {
-    bind(list, "transitionend", function (e) {
+    EventInterface(Splide2).bind(list, "transitionend", function (e) {
       if (e.target === list && endCallback) {
         cancel();
         endCallback();
@@ -3255,8 +3249,8 @@ var SplideRenderer = /*#__PURE__*/function () {
   }
 
   SplideRenderer.clean = function clean(splide) {
-    var _EventInterface17 = EventInterface(splide),
-        on = _EventInterface17.on;
+    var _EventInterface15 = EventInterface(splide),
+        on = _EventInterface15.on;
 
     var root = splide.root;
     var clones = queryAll(root, "." + CLASS_CLONE);

dist/js/splide.esm.js

@@ -2910,24 +2910,21 @@ var DEFAULTS = {
 };
 
 function Fade(Splide2, Components2, options) {
-  var _EventInterface15 = EventInterface(Splide2),
-      on = _EventInterface15.on;
+  var Slides = Components2.Slides;
 
   function mount() {
-    on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-      nextTick(function () {
-        Components2.Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
-      });
+    EventInterface(Splide2).on([EVENT_MOUNTED, EVENT_REFRESH], init);
+  }
+
+  function init() {
+    Slides.forEach(function (Slide) {
+      Slide.style("transform", "translateX(-" + 100 * Slide.index + "%)");
     });
   }
 
   function start(index, done) {
-    var track = Components2.Elements.track;
-    style(track, "height", unit(rect(track).height));
-    nextTick(function () {
-      done();
-      style(track, "height", "");
-    });
+    Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
+    nextTick(done);
   }
 
   return {
@@ -2938,9 +2935,6 @@ function Fade(Splide2, Components2, options) {
 }
 
 function Slide(Splide2, Components2, options) {
-  var _EventInterface16 = EventInterface(Splide2),
-      bind = _EventInterface16.bind;
-
   var Move = Components2.Move,
       Controller = Components2.Controller,
       Scroll = Components2.Scroll;
@@ -2949,7 +2943,7 @@ function Slide(Splide2, Components2, options) {
   var endCallback;
 
   function mount() {
-    bind(list, "transitionend", function (e) {
+    EventInterface(Splide2).bind(list, "transitionend", function (e) {
       if (e.target === list && endCallback) {
         cancel();
         endCallback();
@@ -3250,8 +3244,8 @@ var SplideRenderer = /*#__PURE__*/function () {
   }
 
   SplideRenderer.clean = function clean(splide) {
-    var _EventInterface17 = EventInterface(splide),
-        on = _EventInterface17.on;
+    var _EventInterface15 = EventInterface(splide),
+        on = _EventInterface15.on;
 
     var root = splide.root;
     var clones = queryAll(root, "." + CLASS_CLONE);

dist/js/splide.js

@@ -2908,24 +2908,21 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   };
 
   function Fade(Splide2, Components2, options) {
-    var _EventInterface15 = EventInterface(Splide2),
-        on = _EventInterface15.on;
+    var Slides = Components2.Slides;
 
     function mount() {
-      on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-        nextTick(function () {
-          Components2.Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
-        });
+      EventInterface(Splide2).on([EVENT_MOUNTED, EVENT_REFRESH], init);
+    }
+
+    function init() {
+      Slides.forEach(function (Slide) {
+        Slide.style("transform", "translateX(-" + 100 * Slide.index + "%)");
       });
     }
 
     function start(index, done) {
-      var track = Components2.Elements.track;
-      style(track, "height", unit(rect(track).height));
-      nextTick(function () {
-        done();
-        style(track, "height", "");
-      });
+      Slides.style("transition", "opacity " + options.speed + "ms " + options.easing);
+      nextTick(done);
     }
 
     return {
@@ -2936,9 +2933,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Slide(Splide2, Components2, options) {
-    var _EventInterface16 = EventInterface(Splide2),
-        bind = _EventInterface16.bind;
-
     var Move = Components2.Move,
         Controller = Components2.Controller,
         Scroll = Components2.Scroll;
@@ -2947,7 +2941,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var endCallback;
 
     function mount() {
-      bind(list, "transitionend", function (e) {
+      EventInterface(Splide2).bind(list, "transitionend", function (e) {
         if (e.target === list && endCallback) {
           cancel();
           endCallback();

src/css/core/object/modifiers/fade.scss

@@ -3,18 +3,12 @@
 
   &__track--fade {
     > #{ $root }__list {
-      display: block;
-
       > #{ $root }__slide {
-        left: 0;
         opacity: 0;
-        position: absolute;
-        top: 0;
         z-index: 0;
 
         &.is-active {
           opacity: 1;
-          position: relative;
           z-index: 1;
         }
       }

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

@@ -34,7 +34,7 @@ $settings = get_settings();
         // paginationDirection: 'ttb',
         rewindSpeed: 2000,
         // role: '',
-        label: '1',
+        label: 'Changed Label',
         focus: 0,
         compact: true,
 

src/js/test/php/examples/overflow.php

@@ -21,6 +21,8 @@ $settings = get_settings();
       var splide01 = new Splide( '#splide01', {
         fixedWidth : '6rem',
         gap        : 10,
+        compact    : true,
+        focus      : 0,
       } );
 
       splide01.on( 'overflow', overflow => {

src/js/transitions/Fade/Fade.ts

@@ -2,7 +2,7 @@ import { EVENT_MOUNTED, EVENT_REFRESH } from '../../constants/events';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { Components, Options, TransitionComponent } from '../../types';
-import { nextTick, noop, rect, unit, style } from '../../utils';
+import { nextTick, noop } from '../../utils';
 
 
 /**
@@ -17,35 +17,35 @@ import { nextTick, noop, rect, unit, style } from '../../utils';
  * @return A Transition component object.
  */
 export function Fade( Splide: Splide, Components: Components, options: Options ): TransitionComponent {
-  const { on } = EventInterface( Splide );
+  const { Slides } = Components;
 
   /**
    * Called when the component is mounted.
-   * The nextTick disables the initial fade transition of the first slide.
    */
   function mount(): void {
-    on( [ EVENT_MOUNTED, EVENT_REFRESH ], () => {
-      nextTick( () => {
-        Components.Slides.style( 'transition', `opacity ${ options.speed }ms ${ options.easing }` );
-      } );
+    EventInterface( Splide ).on( [ EVENT_MOUNTED, EVENT_REFRESH ], init );
+  }
+
+  /**
+   * Initializes the component.
+   * Offsets all slides for stacking them onto the head of the list.
+   * The `nextTick` disables the initial fade transition of the first slide.
+   */
+  function init(): void {
+    Slides.forEach( Slide => {
+      Slide.style( 'transform', `translateX(-${ 100 * Slide.index }%)` );
     } );
   }
 
   /**
    * Starts the transition.
-   * Explicitly sets the track height to avoid it will collapse in Safari.
    *
-   * @param index - A destination index.
+   * @param index - A slide index to be active.
    * @param done  - The callback function that must be called after the transition ends.
    */
   function start( index: number, done: () => void ): void {
-    const { track } = Components.Elements;
-    style( track, 'height', unit( rect( track ).height ) );
-
-    nextTick( () => {
-      done();
-      style( track, 'height', '' );
-    } );
+    Slides.style( 'transition', `opacity ${ options.speed }ms ${ options.easing }` );
+    nextTick( done );
   }
 
   return {

src/js/transitions/Slide/Slide.ts

@@ -17,7 +17,6 @@ import { abs, apply, style } from '../../utils';
  * @return A Transition component object.
  */
 export function Slide( Splide: Splide, Components: Components, options: Options ): TransitionComponent {
-  const { bind } = EventInterface( Splide );
   const { Move, Controller, Scroll } = Components;
   const { list } = Components.Elements;
   const transition = apply( style, list, 'transition' );
@@ -31,7 +30,7 @@ export function Slide( Splide: Splide, Components: Components, options: Options
    * Called when the component is mounted.
    */
   function mount(): void {
-    bind( list, 'transitionend', e => {
+    EventInterface( Splide ).bind( list, 'transitionend', e => {
       if ( e.target === list && endCallback ) {
         cancel();
         endCallback();