Slick: Scrollbar jump on previous/next slide click in Chrome

[zgreen]

Hi there,

First off, thanks for slick, and all your work on it. It's really terrific, and I use it frequently.

After updating to 1.5.6, it seems that clicking either the "Previous" or "Next" buttons causes the scrollbar to jump in Chrome (43). Here is a codepen test using the current version, and here is a test using version 1.5.5. This does not appear to be an issue on either Firefox or Safari (I have not tested IE).

(Setting accessibility: false corrects this behavior, but that's obviously not ideal. The work done on https://github.com/kenwheeler/slick/pull/1467 is super helpful, and I am all for making slick more accessible.)

My question is, is this the desired behavior? If it is, I'll close the issue. If not, I'm happy to submit a PR, but I don't want to interfere with the accessibility work that's been done.

Thanks again.

[leggomuhgreggo]

Interesting. I'm pretty sure this is related to tab focus from #1467. It looks like when the slider height is larger than the window height, the browser jumps to the top of the focused element.

If you set accessibility to false (example) it wont do that, but that's an unfortunate decision to have to make.

I'm pretty sure that the "focus jump" will only happen when a user clicks a nav element; I tested with auto play, and if I was scrolled way down the page, it wouldn't jump when it scrolled. So, I guess I'm curious what the use case is for a slider that's larger than the window height, where this would be an issue.

@msrafi @simeydotme what do you think? I was looking around to see if there's a way to control the behavior, but the options I'm seeing don't look very smooth.

Thanks!

EDIT: Zoiks, I didn't read the first initial issue very closely--said everything I just did sorry for the redundancy :p

[zgreen]

I don't think the carousel itself has to be larger than the window height; there just has to be enough content in the DOM to overflow the window height. See this fork of my first example. (Scroll down the window a bit, then click "Next").

And yes, you're correct, that this appears only to be an issue on nav element clicks. Arrow key navigation does not cause any scrollbar jump.

[leggomuhgreggo]

Yeah, it's a little abrupt, but maybe not too tremendously onerous, just because if someone clicked it, they're at least signaling intent to interact with the slider.

[dsmy]

+1 on this issue where clicking nav items causes page to jump.

[lebiru]

+1 getting this too
Google Chrome Version 44.0.2403.130 m

Mitigation

"accessibility": false

[kenwheeler]

@msrafi any ideas?

[msrafi]

I am going to check this later today or tomorrow. Will get back with some solution to this.

[msrafi]

Hello There

Please take a look at the below updated pages and let me know if this works.

Updated Sample Page with new script:
@zgreen http://codepen.io/msrafi/pen/bdZWmX http://codepen.io/msrafi/pen/eNXWQg

@kenwheeler I will create a pull request if all goes well.

[zgreen]

@msrafi Thanks so much for taking a look at this. Your updated samples do seem to have addressed the Chrome scrollbar jump. Unfortunately, I'm now seeing some rapid flickering of the slides on iOS Safari, (iOS version 8.4, iPhone 6). Here's a gif:

[msrafi]

@zgreen How is the prev versions?

[zgreen]

Sorry, I thought I'd tested my initial examples in iOS, but it seems the flickering is present on those versions as well. Not sure what's causing that, but does seem like your updates resolve the issue raised here. Thanks!

[msrafi]

@zgreen looks like we have found another issue. Need to check what causing it.

[ghost]

Hey there,

We are getting this (or a very similiar issue) still. We have the latest version of Slick installed.
When we click next/prev, the animation on the slide plays, then the scrollbar jumps down.

Any help with this would be much appreciated! Thanks.

[msrafi]

@MrB-Digital An example will help to understand the issue

[Steffi3rd]

@lebiru Thanks for the reply: "accessibility": false; It works for me.

[Atorich]

Thank you for "accessibility": false. But the question is: WHY? Why parameter that Enables tabbing and arrow key navigation fixes this?

[CrazyIrish]

+1 - Slick version 1.5.7

Setting "accessibility": false didn't seem to work for me. Also the patches from @msrafi didn't work either.

I am using a vertical slider full of image thumbnails (inside a bootstrap col-md-3). Here is the relevant portion of HTML that Slick is manipulating and likely related to the scroll jump:

<div class="slick-track" style="opacity: 1; height: 3850px; transform: translate3d(0px, -2310px, 0px);">...</div>

As a workaround I am using:

var scrollTimer;

$('#thumbnails').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var scrollPosition = $(window).scrollTop();

    if (scrollTimer)
        clearInterval(scrollTimer);

    scrollTimer = setInterval(function() {
        $(window).scrollTop(scrollPosition);
    }, 1);
});

$('#thumbnails').on('afterChange', function(event, slick, currentSlide, nextSlide){
    if (scrollTimer)
        clearInterval(scrollTimer);
});

Obviously this is less than ideal, hoping for a fix upstream.

[msrafi]

@CrazyIrish Can you please give an example?

I have tested the sliders in below testing URL:
http://codepen.io/msrafi/pen/bdZWmX http://codepen.io/msrafi/pen/eNXWQg

[depiction]

This appears to only be a problem with the minified version of slick.js.

I forked http://codepen.io/msrafi/pen/bdZWmX, replacing slick.js with slick.min.js.

If you go to http://codepen.io/anon/pen/ZbZmdZ, scroll down the page and click "next", you'll see the page scroll up a bit.

[leggomuhgreggo]

Should be resolved in the master. Closing. Thanks everyone.