Jquery UI bounce nowworking as expected in Internet Explorer

[Violet_82]

HI guys, I'm redoing my old photography website and I'm still at the very beginning of the project. Somewhere I saw a jquery bounce functionality implemented and I thought I'd do it for my website as well, so I downloaded all I needed from the jquery ui website and got it work. The good news is that it seems to work OK in every browser except in IE - I have 11 installed.
Now, the actual animation works, but what it does is every time the animation restarts (it runs all the time) the page jumps a bit to the top, not all the way though, just the size of the height of the arrow being animated. If it makes no sense, here is the URL and you can check yourself in IE:
http://antonioborrillo.co.uk/new_photography/home.html
If you click the animated arrow, the page scrolls down all the way till the navigation is visible but in IE it then scrolls back up so that the arrow appears again.
Now, the way I've implemented the functionality is very simple:

$(document).ready(function(){
    //animateArrow();
    bounce();
    var $banner = $(".contentWrapper");
    ...
    });//end of doc ready
function bounce(){
    $(".arrow").effect( "bounce", 3500, bounce);
}   

I was thinking whether a preventDefault would help here, but I'm not sure it's the right thing to do, fact is I don't quite understand why it behaves like that in IE. Needless to say I had a look on the net first, but I couldn't quite come up with anything significant.
Does anybody have an idea as to what's going on in IE?
thanks

[AleMonteiro]

I just tried on my IE v11.0.9600.18205 (on Widows 8.1) and it's working with no glitchs. No "auto scroll" happening.

Can you post the HTML and CSS of the banner and arrow?

In any case, the first thing that jumped into my mind was this: Try changing the position of the arrow from relative to absolute. If the arrow position it's absolute inside the banner content, them it won't affect any other object on the page, which may resolve the scrolling issue.

[rproffitt]

Did you check the caniuse web page? I may have the search wrong but it looks to fail on Safari as well.
http://caniuse.com/#search=arrow

[Violet_82]

Hi AleMonteiro,
I tried your suggestion but it won't work. Here is the HTML and CSS as requested (the js is in the previous post):

<div class="mainWrapper">
    <div class="bannerWrapper">
        <div class="contentWrapper">
            <div class="photoBanner">
                <img src="image/banner.jpg" alt="">  

            </div>               
            <span class="arrow"></span>
        </div><!-- end of wrapper -->

    </div>




.bannerWrapper{
    overflow:hidden;
}
.contentWrapper{
    /* width:1920px; */
    margin:0 auto;

}
.photoBanner {
    position: relative;
}
.photoBanner img{
    display: block;
    left: 50%;
    margin-left: -960px;
    position: absolute;
    top: 0;
    width: 1920px;
    height:1280px;  
}
span.arrow{
    display:block;
    width:124px;
    height:62px;
    background:url("images/arrow.png") no-repeat 0 0;
    left:50%;
    margin-left:-62px;
    position: absolute;
    bottom:15px;
    cursor:pointer; 
}

Bear in mind that jquery UI adds an extra div around the arrow:

<div class="ui-effects-wrapper" style="font-size: 100%; background: transparent none repeat scroll 0% 0%; border: medium none; margin: 0px; padding: 0px; width: 62px; height: 62px; float: none; position: absolute; z-index: auto; top: 801px; left: 951.5px; bottom: 15px; right: 889.5px;">

@rproffitt: I have to admit I'm not terribly familiar with that website, so it tells you if something works on any browser. So what is that "arrow" search criterium you used? How does it know that it's done by using jquery ui?
thanks

[Violet_82]

I mean the problem doesn't seem to be with the HTML or CSS but with the actual bounce function, because everytime that's called the page shots back up. In fact if I change the js from this

$(document).ready(function(){
    //animateArrow();
    bounce();
    var $banner = $(".contentWrapper");
    ...
    });//end of doc ready
function bounce(){
    $(".arrow").effect( "bounce", 3500, bounce);
}   

to this

$(document).ready(function(){
    //animateArrow();
    bounce();
    var $banner = $(".contentWrapper");
    ...
    });//end of doc ready
function bounce(){
    $(".arrow").effect( "bounce", 3500);
}   

so that the counce is called only once, then no problem occurs

[gentlemedia]

A bit off-topic, but instead of loading this massive jquery-ui files for just a bounce effect, you could also use a few lines of CSS to get the effect.

.arrow { animation: bounce 2s infinite }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
    40% { transform: translateY(-30px) }
    60% { transform: translateY(-15px) }
}

http://codepen.io/gentlemedia/full/BKLbZZ/

Unless you're planning to use more from jquery-ui of course, but still :)

[rproffitt]

@Violet_82. It's a site I keep handy since functions and features change from browser to browser. I used a simply search for arrow to see what it would turn up but you can refine it to your called functions. The example I shared finds it not working in the browser you found not working so as the author you know your code better than I.

It's sometimes a shock to see how disparate the browsers are in terms of feature implementation.

[Violet_82]

I must admit I didn't know you could do that bouncy animations with CSS3, so I didn't even explore that avenue.
The Jquery UI bundle is pretty small, about 600kb as I downloaded only what I needed for that (I don't really need it for anything else). Having said that, if something can be done with CSS, that's even better, so I'll have a good look at this CSS3 animation (I've seen your demo, and that's exactly what I need).
So basically, at 0%, 20%, 50%, 80%, 100% (of the animation) the arrow doesn't move, but at 40% you move it 30px downward and at 60% 15px downward. Is that the way it works?

[gentlemedia]

The Jquery UI bundle is pretty small, about 600kb as I downloaded only what I needed for that (I don't really need it for anything else).

600kb is pretty HUGE... and certainly for only that bounce effect :)

So basically, at 0%, 20%, 50%, 80%, 100% (of the animation) the arrow doesn't move, but at 40% you move it 30px downward and at 60% 15px downward. Is that the way it works?

Indeed! But it could've be done also with an easeOutBack easing effect created with a cubic-bezier timing-function over the duration of 0% to 100%. It would've made the effect even smoother.
https://developer.mozilla.org/en/docs/Web/CSS/timing-function

[Violet_82]

cool, thanks. I've implemented it on my site and it works pretty well, and no jerky effect in IE (I<E10 has no effect but I's happy with that)