jQuery effects slide Bug in IE

I am using the jQuery effect slide for animation.  It works great on Chrome, but in IE, if I scroll the animation up, it moves the page back down on it's own.  Obviously not a good thing.

Any ideas on this would be greatly appreciated.

HTML

<!-- Carousel -->
<section id="carousel_gadget" ]>
  <div data-ng-click="toggleSettings()" data-ng-show="inEditMode" class="settings-cog">
    <i class="fas fa-cog"></i> {{gadgetTitle}}
  </div>

  <div class="carousel d3-card d3-card-main d3-card-announcement">
    <div class="carousel-inner">
      <div class="feature" ng-model="slides" ng-hide="HideSlide">
        <div id="jq" style="float: left;">
          <img class="feature-img" data-ng-src="{{slides[currentItem].Image}}" alt="{{slides[currentItem].Title}}" data-ng-if="!slides[currentItem].IsPublishingImage" />

          <div class="feature-content">
            <div><a class="read-more-small-button" href="/sites/portal/Pages/Some_ShowAll.aspx">More</a></div>
            <div class="eyebrow">List Data</div>
            <div class="title"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">{{slides[currentItem].Title | adjustlength:100}}</a></div>
            <div class="date">{{slides[currentItem].Date | date:'MMMM d, y'}}</div>
            <div class="blurb">{{slides[currentItem].Description | adjustlength:150}}</div>
            <div class="button"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">Read More</a></div>

          </div><!-- feature content -->
        </div>
        <div class="counter">{{currentItem + 1}} of {{slides.length}} Amount of Data</div>

        <div class="controls">
          <div class="left-arrow" ng-click="PreviousRecord(false)"></div>

          <div class="items">

            <div id="s0" data-ng-class="isActiveSlide1(SlideZero)"><a href="#" ng-click="GoToRecord(SlideZero)">{{slides[SlideZero].Title | adjustlength:50}}</a></div>
            <div id="s1" data-ng-class="isActiveSlide1(SlideOne)"><a href="#" ng-click="GoToRecord(SlideOne)">{{slides[SlideOne].Title | adjustlength:50}}</a></div>
            <div id="s2" data-ng-class="isActiveSlide1(SlideTwo)"><a href="#" ng-click="GoToRecord(SlideTwo)">{{slides[SlideTwo].Title | adjustlength:50}}</a></div>

          </div>
          <div class="right-arrow" ng-click="NextRecord(false)"></div>

        </div><!-- controls -->
      </div><!-- feature -->
    </div><!-- carousel inner-->
  </div><!-- carousel -->

  <gadget-carousel-settings></gadget-carousel-settings>
</section>

Select all Open in new window

CSS

.carousel {
  width: 798px;
  display: block;
}

.carousel-inner {
  padding: 10px 0px;
}

.feature {
  background: white;
  height: auto;
  display: block;
  clear: both;
  float: left;
}

.feature-img {
  width: 270px;
  height: 240px;
  background: #999;
  display: inline;
  float: left;
}

.feature-content {
  display: inline;
  width: 508px;
  padding: 0px 0px 0px 20px;
  display: inline;
  float: left;
}
.feature-content .read-more-small-button {
  margin-top: 0px !important;
}
  .feature-content .more {
    text-align: right;
    display: inline-block;
    float: right;
    font-family: AktivGrotesk-Regular;
    font-size: 14px;
    line-height: 1.14;
    text-align: right;
    color: #000;
  }
  /*.feature-content .more::after {
    content: "»";
    vertical-align: bottom;
    margin-top: -1px;
    color: rgb(0, 0, 0);
    background: 0px 0px;
    padding: 0px;
    content: "\f054";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 11px;
}*/
  .feature-content .eyebrow {
    line-height: 1.43;
    letter-spacing: .8px;
    font-family: AktivGrotesk-Regular;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0;
    padding-bottom: 16px;
    width: 50%;
    display: inline-block;
  }

  .feature-content .title {
    font-family: 'Lyon Text Web';
    font-weight: 700;
    color: #000 !important;
    margin: 0 0 9px;
    letter-spacing: .2px;
    display: -webkit-box;
    height: auto;
    font-size: 24px;
    line-height: 26px;
  }

    .feature-content .title a {
      text-decoration: none;
      color: black;
    }

      .feature-content .title a:hover {
        text-decoration: underline;
        color: black;
      }

  .feature-content .date {
    font-size: 13px;
    font-family: AktivGrotesk-Regular;
    font-weight: 400;
    margin-bottom: 8px;
    text-transform: none;
    line-height: 1.43;
    letter-spacing: .2px;
  }

  .feature-content .blurb {
    text-transform: none;
    font-weight: normal;
    font-size: 15px;
    font-family: Lyon Text Web;
    letter-spacing: normal;
  }

  .feature-content .button a {
    display: block;
    width: 115px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #000;
    text-decoration: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
    margin-top: 10px;
    font-family: AktivGrotesk-Regular;
  }

    .feature-content .button a:hover {
      background: #32d700;
    }

    div .feature {
      transition: all linear 10.5s;
    }

    .ng-hide {
      height: 0;
      width: 0;
      background-color: transparent;
      top: -200px;
      left: 200px;
    }


.counter {
  display: block;
  clear: both;
  font-size: 11px;
  font-family: AktivGrotesk-Regular;
  font-weight: 400;
  padding: 8px 0px 8px 20px;
  text-transform: none;
  line-height: 1.43;
  letter-spacing: .2px;
}

.controls {
  height: 80px;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  display: block;
  clear: both;
}

  .controls .items {
    width: 100%;
  }

  .controls .items > div.active {
    border-top: 1px solid #32d700;
  }

    .controls .items > div {
      width: 225px;
      height: 100%;
      display: inline;
      float: left;
      padding: 8px;
      margin: 0 8px;
      border-top: 1px solid #000;
      vertical-align: top;
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      color: #000;
      font-family: 'Lyon Text Web';
      letter-spacing: .2px;
      font-weight: 700;
    }

Select all Open in new window

Controller fragment

$scope.slideDiv.effect("slide", { direction: 'right' }, 400);

Select all Open in new window

Thanks.