[Orbit] Page jumping after each slide transition

[logopogo]

How to reproduce this bug:

1. View the Orbit docs page (https://foundation.zurb.com/sites/docs/orbit.html) in Chrome on a MAC or on Android (not sure about Windows).
2. Scroll down so the top of the orbit slider demo is partially up out of view (above the site header)
3. Wait for a slide transition to fire
4. The page will jump back down to reset the slider into full view

What should happen:

Page shouldn't jump at all

What happened instead:

The pages jumps for some reason

Browser(s) and Device(s) tested on:

I've only seen this happen in Chrome (MAC) Version 65.0.3325.162 and a few versions prior and on my Android device.
Have tested on latest Firefox and Safari on MAC and it doesn't seem to occur.

Foundation Version(s) you are using:

6.4.3

Test case link:

Foundations own docs:
https://foundation.zurb.com/sites/docs/orbit.html

[DanielRuf]

It seems the change between the different display properties is the cause.

I am currently trying and this is one solution that works:

js/foundation.orbit.js

...
if (this.options.useMUI && !this.$element.is(':hidden')) {
        Motion.animateIn(
          //$newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
          $newSlide.addClass('is-active');//.css({'position': 'absolute', 'top': 0}),
          this.options[`animInFrom${dirIn}`],
          function(){
            $newSlide.attr('aria-live', 'polite');
            //$newSlide.css({'position': 'relative', 'display': 'block'})
            //.attr('aria-live', 'polite');
        });

        Motion.animateOut(
          $curSlide.removeClass('is-active'),
          this.options[`animOutTo${dirOut}`],
          function(){
            $curSlide.removeAttr('aria-live');
            if(_this.options.autoPlay && !_this.timer.isPaused){
              _this.timer.restart();
            }
            //do stuff?
          });
      } else {
...

scss/components/orbit.scss

@mixin orbit-slide {
  width: 100%;
  position: absolute;

  &.no-motionui {
    &.is-active {
      top: 0;
      left: 0;
    }
  }
}

Not sure if this is the best approach. At least the orbit component has a few issues and the intent of the change between the display properties is not quite clear to me.

cc @ncoden @SassNinja @JeremyEnglert or do you see any other solutions and would this be the "correct" solution?

[ncoden]

@DanielRuf According to me, the problem is that there is a time when the animation finish where both the new and old slides has display: block, and none has position: absolute.

Your fix seems to do the job (all slides are always in absolute) but I wonder if there is any side-effect of that. With images of different heights, does the container scale itself correctly ?

[DanielRuf]

I wonder if there is any side-effect of that. With images of different heights, does the container scale itself correctly ?

That is a good question and I also thought there could be side effects. I'll prepare some codepens with the change to check a few more usecases.

[ncoden]

The position: absolute; animation was always used by Orbit (a498941) and I did not found issues related to it. So I think we can safely make slides always in absolute positioning. Need tests obviously.