We help IT Professionals succeed at work.

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>

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;
    }

Open in new window


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

Open in new window



Thanks.
Comment
Watch Question

Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Are we talking Edge or IE?

If Edge it is worth pursuing - if it is IE it is (in my view) not.
Howard BashSenior Software Engineer

Author

Commented:
We're talking about IE 11.0
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
In all honesty Howard - I lost interest in IE11 shortly after its release. The effort required to support a browser that does not support current standards makes it worth considering abandoning it altogether. According to the latest W3 stats IE11 makes up around 3% of the browser share - yet it requires most of the effort to get code to work. That equation does not work for me.

Having said that we can try to solve it but not off the code you posted. The problem is not the code (if it is working in Chrome and FF) - the problem is IE so we would need to look at a workaround.

To do this we would need a minimal working example of the problem. You are using AngularJS as well so we need to determine if this is a jQuery library issue or something on the AngularJS side that is causing it.

My advice is to put together a working sample that uses the minimum code necessary and put that up on your server or on a Fiddle and let's go from there.

Without a means to replicate it (the code you have posted is not enough to do this) it is not feasible to try and solve this.
leakim971Multitechnician
Distinguished Expert 2019

Commented:
Howard BashSenior Software Engineer

Author

Commented:
Julian,

I completely agree about IE, however,  the customer is always right, yes?

No choice on this.
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
the customer is always right, yes?
Not always, I have convinced many to ignore IE11. My philosophy is if we pander to the likes of Microsoft who make the development effort that much more difficult they won't change.

I get where you are coming from - my personal standpoint is I don't support IE11.

Having said that - did you read the other part of my post.
Howard BashSenior Software Engineer

Author

Commented:
Julian,

Just getting back to this.  JSFiddler doesn't support IE (big surprise)...
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Not surprised. This has been going on since IE6 - Microsoft has been aware of it and 5/6 versions of IE later we are still dealing with the same nonsense.

The sooner IE11 dies the better.
Howard BashSenior Software Engineer

Author

Commented:
Hi,
I think I have it on plunker:
https://plnkr.co/edit/X37XbQEd4sUTF3cnFGhQ?p=preview

However, I can't seem to get the jQuery-ui affect slide to work.

See the method: ShowSlideDiv
 
I commented out the slide call and am just swapping images via index incrementing.

To see the issue,  you probably need to get the jQuery UI code to work instead and then scroll to bottom of page to text hiding the carousel.  It should jump up in IE>
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Had a look, I managed to get a local version up and running but still not sure what I am looking for?
Howard BashSenior Software Engineer

Author

Commented:
Hi,

I am trying to demonstrate the page jumping during the "slide" transitions.  However,  in Plunker I wasn't able to get the slide affect to work so I just switched slides to display the next slide.

Ideally in the following function:

 
$scope.ShowSlideDiv = function() {
    $scope.slideDiv.show();

    //Uncommenting these lines and commenting the line above breaks the carousel
    //Requires jQuery-UI
    //if ($scope.slideDiv) {
    //  $scope.slideDiv.effect("slide", {
    //    direction: 'right'
    //  }, 400);
    //  }
  };

Open in new window


Change it to the following:
 $scope.ShowSlideDiv = function() {

// I added this as a substitute for the jQuery UI slide effect --->    $scope.slideDiv.show();

    //Requires jQuery-UI
    if ($scope.slideDiv) {
      $scope.slideDiv.effect("slide", {
        direction: 'right'
      }, 400);
     }
  };

Open in new window


When I did so in Plunker, the call fails and the slides don't display.  If you can get the effect to work, the issue is that as you scroll up, hiding the carousel and showing the text paragraphs, the page jumps up in IE only (lovely).  The target audience uses IE.

Also, at the bottom of the code, you'll find the following:

  $interval(function() {
    //$scope.value++;
    $scope.AutoNextRecord(true);
  }, 2000);


  //$scope.StartShow();

Open in new window


However,  I really only want/need the following:
  
$scope.StartShow();

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2019
Commented:

I did that but I am not seeing anything different between IE and FF.


What happens is this


I get a scolling set of images at the top of the page.

I scroll down to the bottom of the page and on slide the page jumps back to the top in Firefox and Chrome as well - although in IE it is more pronounced - I had to add more <p>'s to the page to see the effect properly.


This happens because the container for the image is shrinking when the image is changed and so the page is becoming smaller so the page is jumping.


As a test do this (code snippets seem to be on the fritz so here is the code outside of a snippet)


<div class="carousel d3-card d3-card-main d3-card-announcement" style="height: 600px; overflow: hidden">


<div class="carousel d3-card d3-card-main d3-card-announcement" style="height: 600px; overflow: hidden">

Add the style to fix the height and the overflow hidden to hide the overflow of the images - you will see the problem goes away. 


Standardise the height of your carousel container so the images don't overflow to affect page height and there should be no more jumping.

Howard BashSenior Software Engineer

Author

Commented:
I'll try that now.  The images are all the same size though.  Also,  I assume that this jumping doesn't happen in Chrome. And, did you switch to use the jQuery-ui effect code?
Howard BashSenior Software Engineer

Author

Commented:
I set the style attribute on the DIV and that worked.  This is fine.  I would still like to see why only IE has this problem and also how to get plunker to work with that jQuery-UI effect slide method.

Also always, thanks Julian.
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:

The other browsers do have the problem as I mentioned in my earlier email - just not as pronounced. I am guessing just different browser rendering strategies.


As to the Plunker - I would open a separate question for that. I downloaded your source and got it working locally.



You are welcome.

Howard BashSenior Software Engineer

Author

Commented:
Julian,

As usual comes to the rescue.  Thank you sir!

-Howard
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome