Flickity inconsistently working on Android Chrome

[mdmoreau]

http://codepen.io/anon/pen/jEJZyz (JS)
http://codepen.io/anon/pen/RNdQKR (jQuery)

When multiple instances of Flickity are on the same page, lower ones won't work. The first slideshow seems to work consistently, but after interacting with it, those below won't move at all.

If you touch one of the lower instances first it won't move, however scrolling back up to the first will allow interaction with the first one along with any others that were touched before it. So touching slider 1 breaks sliders 2 and 3, but touching slider 2 then 1 allows 2 to work, but still not 3.

The only way I've been able to fix the issue is scrolling up to reveal the address bar (triggering page resize) while a broken instance of Flickity is on the screen - this was on my project site not codepen though. At that point the broken one currently on the screen will be fixed, but any others won't.

Seems to be behaving really odd, so I tried to narrow the issue down as much as I could. Have only tested on a Moto X and Nexus 7, but they're both getting the same bug.

[desandro]

Thanks for reporting this issue. I don't have a proper Android test device at this time, so I cannot confirm this bug. I did test on iOS Chrome and was not able to reproduce. Please chime in if you can reproduce this bug.

[oppenheimer-]

bug confirmed: Chrome 41.0.2272.96 / Android 5.0.1 / Nexus 4 / Blink 537.36 / JS V8 4.1.0.21
I was able to fix this behaviour by using the nav-arrows on slider 2 and 3.

[jj2020driver]

Yes I have almost same odd behaviour on mobile Chrome on Android. Even in Chrome emulator.

[starise]

I can confirm this bug. (Chrome 41.0.2272 @ Android 5.0.2)
No problem using the default browser and firefox mobile on the same device.

[pnpetroff]

Is this fixed?

[mdmoreau]

Still seeing the bug on http://s.codepen.io/anon/debug/jEJZyz and http://s.codepen.io/anon/debug/RNdQKR, however once I upgraded to 1.0.2 on my project site I haven't been able to recreate the issue again. Seems like this might just be a coincidence though.

I'm guessing something in my JS may inadvertently be fixing the problem - I'll try to see if I can figure out what's going on when I get a chance.

[jj2020driver]

This is crucial bug. Please, report is it already fixed? I want to use flickity on mobile sites safely.

[mmjaeger]

any news on this

[solemone]

I have the bug too, though only at one project. In another projects, everything is going great and I can’t find the difference. When I am using lazyload as describes in #172 it also works with the problem project.

Nexus 5
Android 5.1.1
Chrome 45

[chudzinski]

I was having the same problem, and after a day of debugging, I was able to determine that Chrome was just not firing touchstart events after two instances of flickity were loaded. On Android with Chrome, touchstart was broken on the entire page, including non-flickity elements. Meanwhile everything worked fine on older Android phones that do not use Chrome, so I do think it is a Chrome bug.

The good news is that registering another touchstart handler seems to force Chrome to refresh its state, fixing everything. My work around was to place a useless document.body.addEventListener( ‘touchstart’, Function.prototype ); just after Flickity is created and before it is returned to the user. It’s a hack, but it definitely solved my problems.

See: chudzinski@5086f7c

[desandro]

I'm closing this issue now that its been quiet for a while. Please open a new issue if you run into Android Chrome issues.