motion-ui bug on orbit carousel

[davicho]

How to reproduce this bug:

This is exactly what my problem is:

1. Visit: F6 Orbit on mobile (must be a mobile device not, resized desktop window)
2. Go to any Orbit slide
3. Swipe (left/right) the slide WHILE motioning up or down (may take several swipes to trigger error below)

What should happen:

The slide should go to the next slide.

What happened instead:

Sometimes after several "slanted" swipes the upcoming slide with disappear.

From what I can see, in the html, the is-active class disappears and what I assume is causing the issue.

This behavior is the same on my pages as well.

[agoradesign]

I can confirm this bug. It happened to me too recently. And it seems, that it is not restricted to mobile devices, as my colleague also saw it on Desktop Firefox browser - but on a mobile devices, it seems to happen more frequently.

I can confirm that there's a relation to Motion UI. I wanted to inspect it in Firebug. The disappearing slide had the 'mui-leave-active' class set. As soon as I have unset it in Firebug, the slider continued to work immediately. I haven't seen in it another time on a desktop browser. Being under time pressure, we have disabled Motion UI for that Orbit slider instance in the meantime. Without transiations, it is less pretty, but at least it works..

[focusedonfit]

I can confirm this too on desktop with a site I'm working as well. It happens if you click the next slide button and move your mouse at the same time

[agoradesign]

Does anyone has an idea how to fix this? This bug is so tricky because it's really hard to reproduce it on desktop browsers, therefore nearly impossible to debug.

On the other side, it's definitely a critical bug imho, as it makes Orbit more or less unusable, as this happens randomnly but too often, especially on mobile devices. As already mentioned, the only workaround is to disable the transitions. But to be honest: a slider without sliding effects defeats its purpose. I do use it currently on two projects anyway, but mainly because I really deeply hope, that the problem will soon be solved.

[agoradesign]

I don't know, if it helps, but I can at least list a few measures, that did NOT work for me at all:

• data-swipe="false"
• removing line 303 of foundation.orbit.js (in function changeSlide): if (/mui/g.test($curSlide[0].className)) { return false; }

[zycbob]

This works on Foundation sites 6.2.4 and failed on 6.3.0 - 6.3.1

[dwt47]

I believe this is the same bug I'm getting where if the window is being resized while the orbit is transitioning, the slide that transitioned out will break the Orbit the next time it shows up. From what I've been able to test, the 'transitionend'/'webkitTransitionEnd' event isn't firing at all on the element transitioning out, so the 'mui-leave' classes aren't being removed appropriately. This is true for any transition attached here (I've tested some fades and hinges, and even custom transitions that just affect non-position-related attributes such as color).

If I run this code in the console and then resize the page while a transition is occurring, it shows that the leaving slide never fired webkitTransitionEnd.

$(".orbit-slide").on('webkitTransitionEnd', function(e) {
    $target = $(e.target);
    if ($target.hasClass('mui-leave')) {
	console.log($target.index(), 'Leaving slide fired webkitTransitionEnd');
    } else if ($target.hasClass('mui-enter')) {
	console.log($target.index(), 'Entering slide fired webkitTransitionEnd');
    } else {
	console.log($target.index(), '???');
    }
})

This is happening on both Chrome and IE on Windows 10

[dwt47]

I found a workaround fix, for anyone who's interested:

in foundation.orbit.js's _setWrapperHeight method, add a check to make sure the slide isn't animating before line 141 $(this).css({'position': 'relative', 'display': 'none'});. This was causing slides to hide before completing their transition out, which was stopping transitionend from triggering and leaving the mui-leave classes.

Here's the full method I have:

_setWrapperHeight(cb) {//rewrite this to `for` loop
  var max = 0, temp, counter = 0, _this = this;

  this.$slides.each(function() {
    temp = this.getBoundingClientRect().height;
    $(this).attr('data-slide', counter);

    // ADDED CHECK:
    // if the slide is currently animating, don't mess with it
    // this should fix the bug caused by resizing the page during a transition
    if (!/mui/g.test($(this).attr('class')) && _this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {//if not the active slide, set css position and display property
      $(this).css({'position': 'relative', 'display': 'none'});
    }
    max = temp > max ? temp : max;
    counter++;
  });

  if (counter === this.$slides.length) {
    this.$wrapper.css({'height': max}); //only change the wrapper height property once.
    if(cb) {cb(max);} //fire callback with max height dimension.
  }
}

[mattbesedick]

This issue is still present in foundation-sites: 6.4.1. Are there any fixes in place? Are people still having this issue?