Vertical scroll flickering in IE

[philipstpierre]

I am experiencing the problem when the top or bottom of a carousel region is cut/hidden by the top or the bottom of the browser window. For example, if you scroll down until the bottom of a carousel becomes hidden by the bottom of the window. Now in this position, if you hit the next button of the carousel a couple of times, you will see that the browser window scroll up very quickly and come back in the initial position. It looks like that the amplitude of the scrolling grows with the amount of area that is hidden. The first time it happened, I thought the window was just blinking because it happens very quickly. But if you hit the next button many times and very quickly, you see that the window is really scrolling up and down. I was able to reproduce the problem on flickity's home page: https://flickity.metafizzy.co/. For example with the wrap around and free scroll example.

For small carousels it's less likely to happen, but if your carousel takes half of the height of the window, it's very likely to happen.

I cannot reproduce the problem in chrome.

IE Version: 11.0.9600.18816

[desandro]

Thanks for reporting this issue. I'll keep this open in case others run into the same problem.

Please add a reaction if you've run into this issue as well.

[pabl0rg]

I have the same issue and can reproduce on Chrome 63 by hovering over the thumbnails on this page:

https://www.kemik.gt/comprar/celular-motorola-moto-g5-plus-xt1681-5-2-12mp-32gb/

[mike-tuxedo]

Hi, I also have this problem on IE11.125.16299.0. I can't post a link, because the website will not go online with this bug, but I can confirm this behavior. Also tested it with the flickity examples.

[kaufmo]

Hi @desandro, I've found the same Problem on IE11.0.9600.18860. You will see it on your home slider (https://flickity.metafizzy.co). Scroll a little bit down and then navigate next/prev some times it flickers.

[kaufmo]

@desandro I think this has to todo with the fix from #76??? In the focus function there is a scrollTo after element focus, why? Is the focus really needed?

UPDATE: I've tested this with the ./sandbox/single.html

[desandro]

@kaufmo Thanks so much for your solution. setActive is a nice solution, but its non-standard, so I'm wary to add it to Flickity.

That said, you can resolve this issue with a duck-punch. Add this code before initializing Flickity:

var focus = Flickity.prototype.focus;
Flickity.prototype.focus = function() {
  // use non-standard setActive for IE11. #651
  if ( this.element.setActive  ) {
    this.element.setActive();
    return;
  }
  // use default
  focus.apply( this, arguments );
};

More good news, there's a new spec for element .focus() that allow for { preventScroll: false } option (thx whatwg/html#834). Currently only Chrome 64 supports it. Hopefully other browsers will get there.

[kaufmo]

@desandro ok thanks for your tip. I understand what you mean but under the focus call there is also a comment with HACK this means for me also non-standard 😉
I've also found the preventScroll but this will take a while until this gets in all browsers and this is unfortunately no option for me.
This means flickity v2 will not support ie11 anymore with this known bug?

[desandro]

Ha, I got to limit myself to one hack!

This means flickity v2 will not support ie11 anymore with this known bug?

To be clear, Flickity still supports IE11. Everything else works as expected. I prefer to keep code as is in Flickity core and allow individual developers to opt-in to this solution.

[desandro]

Closing this issue as its been quiet for a while now. Please open a new issue if you are running into a similar problem with IE.