Can't activate select using Flexslider/SwipeJS on Android/Gingerbread

Question

I've recently finished building a mobile site and discovered a bug that only seems to occur on Android Gingerbread.

When a select input is placed on a slide within a JS slider (such as Flexslider or SwipeJS), you can no longer click it or give it focus and select the options.

I'm wondering if it has to do with the use of display none/block which both these sliders use - perhaps Gingerbread cannot render the select properly under these circumstances? Interestingly, the first slide using SwipeJS is functional; the others not.

I've popped a few tests online to demonstrate:

http://playground.iamkeir.com/slider-flexslider1-select

http://playground.iamkeir.com/slider-flexslider2-select

http://playground.iamkeir.com/slider-swipjs-select

For reference, I'm using Flexslider 2 Beta in the example, although the same issue occurs with Flexslider 1.

https://github.com/woothemes/FlexSlider

https://github.com/woothemes/FlexSlider/tree/FlexSlider2

http://swipejs.com/

Works fine on Android Icecream Sandwich, iPhone - even Blackberry.

I've been fiddling with this on and off for days now and I just can't seem to narrow it down.

Can any one assist please?

Answer 1

So I was kindly given some advice from the chap who built Flexslider, Tyler Smith:

"Have you tried disabling the use of translated3d? useCSS: false, and seeing if the error still occurs? translate3d is a common denominator between swipe/flex, and behaves strangely sometimes."

He was right - that did indeed fix it, although it caused a different error with Flexslider (update: which he has recently fixed).

So beware translate3D - and CSS animations in Android < 4.x, see here: http://daneden.me/2011/12/putting-up-with-androids-bullshit/

So, to fix, I will be targeting Android < 4.x with useCSS: false.

Please note useCSS is an attribute in Flexslider 2 Beta, which is still in testing and development, so use with caution.

Big thank you to Tyler!

Ref:

http://playground.iamkeir.com/slider-flexslider2-select/

https://github.com/woothemes/FlexSlider/tree/FlexSlider2

Answer 2

If the useCSS: false method doesn't work, I found that removing -webkit-backface-visibility: hidden; from the flexslider.css file fixes it.

This may mean that the flip transition won't work as expected though. Haven't tested.