Page Jumps on Slide Change (Chrome, OS X)

[gregpriday]

When you have a slider at the top of the page and you're scrolled further down the page, the page jumps up slightly when the slide changes. I assume this is because the slider's height is 0 for an instance during the transition.

I've only noticed this issue in Chrome on OS X. It works perfectly on Firefox.

I'll fork to see if I can fix it.

[gregpriday]

I fixed this issue by changing my own CSS, so it's not really a Blueberry issue. I was sizing my images using the CSS width:100%; height:auto.

It does seem like Blueberry crops your images by default, am I right? It would be nice to have an option to either crop or scale your slider images. I've added this to my fork.

[aranw]

I have this issue as well and I can't fix it by altering my CSS like @gregpriday mentions.

Anyone know of another solution?

[aranw]

I have traced this issue down to the following code...

$(window).resize(function(){
    setsize();
});

When ever the rotate is triggered with these three lines enabled you get a jump to the top.

[aranw]

My issue was caused by having image height and width set on the elements. How this causes $(window).resize to jump to the top of the page I don't know...

[gregpriday]

I'm not sure why a CSS changed fixed the issue for me, and not for you. The only thing I can suggest is that you wrap the image in a fixed size div before the image is resized and remove the wrapper afterwards. I'll take a look at the issue and see if I can fix it in my fork.

[gregpriday]

I finally fixed this issue by modifying the rotate function. I changed it to start fading in the new image before it started fading out the old image. A very simple fix.

So this is what the first few lines of my rotate function look like now

slides.eq(next).fadeIn(o.duration).addClass('active').queue(function(){
        //add rotateTimer function to end of animation queue
        //this prevents animation buildup caused by requestAnimationFrame
        //rotateTimer starts a timer for the next rotate
        rotateTimer();
        $(this).dequeue()
    });
slides.eq(current).fadeOut(o.duration).removeClass('active');

[gjones]

Hi Greg, following these instructions seems to break the slider if a user double clicks on the pagination instead of single clicks, may need to add a disable attr to the link thats currently active to fix this.